finish auth routes, create cookie token, fix folder structure, add context to FE

28 files changed, 349 insertions, 211 deletions

diff --git a/client/admin/out.js b/client/admin/out.js
index c555bce..93e3b6e 100644
--- a/client/admin/out.js
+++ b/client/admin/out.js
@@ -86,110 +86,158 @@
 /************************************************************************/
 /******/ ({
 
-/***/ "./client/src/admin/jsx/App.jsx":
-/*!**************************************!*\
-  !*** ./client/src/admin/jsx/App.jsx ***!
-  \**************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ "./client/src/admin/api/logout.js":
+/*!****************************************!*\
+  !*** ./client/src/admin/api/logout.js ***!
+  \****************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\n__webpack_require__(/*! ../scss/index.scss */ \"./client/src/admin/scss/index.scss\");\n\nvar _texts = __webpack_require__(/*! ../../common/data/texts.js */ \"./client/src/common/data/texts.js\");\n\nvar _texts2 = _interopRequireDefault(_texts);\n\nvar _TopBar = __webpack_require__(/*! ../../common/jsx/TopBar.jsx */ \"./client/src/common/jsx/TopBar.jsx\");\n\nvar _TopBar2 = _interopRequireDefault(_TopBar);\n\nvar _Info = __webpack_require__(/*! ../../common/jsx/Info.jsx */ \"./client/src/common/jsx/Info.jsx\");\n\nvar _Info2 = _interopRequireDefault(_Info);\n\nvar _MainScreen = __webpack_require__(/*! ./MainScreen.jsx */ \"./client/src/admin/jsx/MainScreen.jsx\");\n\nvar _MainScreen2 = _interopRequireDefault(_MainScreen);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar App = function App() {\n  var _useState = (0, _react.useState)('en'),\n      _useState2 = _slicedToArray(_useState, 2),\n      adminLang = _useState2[0],\n      setAdminLang = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      _useState4 = _slicedToArray(_useState3, 2),\n      projects = _useState4[0],\n      setProjects = _useState4[1];\n\n  var _useState5 = (0, _react.useState)(''),\n      _useState6 = _slicedToArray(_useState5, 2),\n      info = _useState6[0],\n      setInfo = _useState6[1];\n\n  var _useState7 = (0, _react.useState)(''),\n      _useState8 = _slicedToArray(_useState7, 2),\n      hover = _useState8[0],\n      setHover = _useState8[1];\n\n  var _useState9 = (0, _react.useState)('main'),\n      _useState10 = _slicedToArray(_useState9, 2),\n      view = _useState10[0],\n      setView = _useState10[1];\n\n  var _useState11 = (0, _react.useState)(null),\n      _useState12 = _slicedToArray(_useState11, 2),\n      user = _useState12[0],\n      setUser = _useState12[1];\n\n  var t = function t(key) {\n    return _texts2.default[adminLang][key] || _texts2.default['en'][key];\n  };\n\n  // useEffect(() => {\n  //   setInfo('no-saved-websites')\n  //   setHover('');\n  // }, [user]);\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'main' },\n    _react2.default.createElement(_TopBar2.default, { lang: adminLang, setLang: setAdminLang, setHover: setHover, user: user, setUser: setUser, t: t }),\n    _react2.default.createElement(\n      'div',\n      { className: 'main__content' },\n      view === 'main' && _react2.default.createElement(_MainScreen2.default, { projects: projects, t: t, setHover: setHover })\n    ),\n    _react2.default.createElement(_Info2.default, { info: info, hover: hover, t: t })\n  );\n};\n\n_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));\n\n//# sourceURL=webpack:///./client/src/admin/jsx/App.jsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (() => (\n  fetch('/api/user/logout', {\n    method: 'POST',\n  })\n  .then(() => window.location.href = \"/\")\n  .catch(() => {})\n));\n\n\n//# sourceURL=webpack:///./client/src/admin/api/logout.js?");
 
 /***/ }),
 
-/***/ "./client/src/admin/jsx/MainScreen.jsx":
+/***/ "./client/src/admin/context/index.js":
+/*!*******************************************!*\
+  !*** ./client/src/admin/context/index.js ***!
+  \*******************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext());\n\n\n//# sourceURL=webpack:///./client/src/admin/context/index.js?");
+
+/***/ }),
+
+/***/ "./client/src/admin/data/translations.js":
+/*!***********************************************!*\
+  !*** ./client/src/admin/data/translations.js ***!
+  \***********************************************/
+/*! exports provided: defaultLanguage, fallbackLanguage, translations, languages */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"defaultLanguage\", function() { return defaultLanguage; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"fallbackLanguage\", function() { return fallbackLanguage; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"translations\", function() { return translations; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"languages\", function() { return languages; });\nconst defaultLanguage = 'en';\nconst fallbackLanguage = 'en';\nconst translations = {\n  \"en\": {\n    \"main-title\": \"Website Manager\",\n    \"login-to-admin\": \"Login to Admin Panel\",\n    \"login-info\": \"Put your user name and password, then click login button\",\n    \"login\": \"Login\",\n    \"user\": \"User name\",\n    \"password\": \"Password\",\n    \"no-saved-websites\": \"You don't have any saved projects, create a new one\",\n    \"create-new-project\": \"Create new project\",\n    \"create-new-project-hover\": \"Click to create new project\",\n    \"edit-current-project\": \"Edit current project\",\n    \"edit-current-project-hover\": \"Click to edit current active projecct\",\n    \"show-saved-projects\": \"Show saved projects\",\n    \"show-saved-projects-hover\": \"Click to show list of all saved projects\",\n    \"click-to-change-language\": \"Click to change language in the website manager\",\n    \"click-to-change-user\": \"Click to logout or change user password\",\n    \"logout\": \"Logout\",\n    \"click-to-logout\": \"Click to logout/change current user\",\n    \"user-settings\": \"User settings\",\n    \"click-to-change-user-settings\": \"Click to change user name, password or to completely remove current user\",\n  },\n  \"de\": {\n    \"main-title\": \"Website Manager\",\n  },\n  \"es\": {\n    \"main-title\": \"Website Manager\",\n  },\n  \"pl\": {\n    \"main-title\": \"Website Manager\",\n    \"login-to-admin\": \"Zaloguj do Panelu Administracyjnego\",\n    \"no-saved-websites\": \"Nie masz jeszcze żadnych zapisanych projektów, utwórz nowy\",\n    \"create-new-project\": \"Utwórz nowy projekt\",\n    \"edit-current-project\": \"Edytuj bieżący projekt\",\n    \"show-saved-projects\": \"Pokaż zapisane projekty\",\n  },\n};\n\nconst languages = Object.keys(translations);\n\n\n//# sourceURL=webpack:///./client/src/admin/data/translations.js?");
+
+/***/ }),
+
+/***/ "./client/src/admin/hocs/WithHover.jsx":
 /*!*********************************************!*\
-  !*** ./client/src/admin/jsx/MainScreen.jsx ***!
+  !*** ./client/src/admin/hocs/WithHover.jsx ***!
   \*********************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _WithHover = __webpack_require__(/*! ../../common/jsx/WithHover.jsx */ \"./client/src/common/jsx/WithHover.jsx\");\n\nvar _WithHover2 = _interopRequireDefault(_WithHover);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar MainScreen = function MainScreen(_ref) {\n  var projects = _ref.projects,\n      t = _ref.t,\n      setHover = _ref.setHover;\n  return _react2.default.createElement(\n    'div',\n    { className: 'main-screen' },\n    _react2.default.createElement(\n      'h1',\n      { className: 'main-screen__header' },\n      t('main-title')\n    ),\n    _react2.default.createElement(\n      'div',\n      { className: 'main-screen__list' },\n      !projects.length && _react2.default.createElement(\n        _WithHover2.default,\n        { setHover: setHover, message: 'edit-current-project-hover' },\n        _react2.default.createElement(\n          'p',\n          { className: 'main-screen__item' },\n          t('edit-current-project')\n        )\n      ),\n      !projects.length && _react2.default.createElement(\n        _WithHover2.default,\n        { setHover: setHover, message: 'show-saved-projects-hover' },\n        _react2.default.createElement(\n          'p',\n          { className: 'main-screen__item' },\n          t('show-saved-projects')\n        )\n      ),\n      _react2.default.createElement(\n        _WithHover2.default,\n        { setHover: setHover, message: 'create-new-project-hover' },\n        _react2.default.createElement(\n          'p',\n          { className: 'main-screen__item' },\n          t('create-new-project')\n        )\n      )\n    )\n  );\n};\n\nexports.default = MainScreen;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/MainScreen.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _context = __webpack_require__(/*! ../context */ \"./client/src/admin/context/index.js\");\n\nvar _context2 = _interopRequireDefault(_context);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar WithHover = function WithHover(_ref) {\n  var children = _ref.children,\n      message = _ref.message,\n      classes = _ref.classes;\n\n  var _useContext = (0, _react.useContext)(_context2.default),\n      setHover = _useContext.setHover;\n\n  return _react2.default.createElement(\n    'div',\n    {\n      onMouseEnter: function onMouseEnter() {\n        return setHover(message);\n      },\n      onMouseLeave: function onMouseLeave() {\n        return setHover(null);\n      },\n      className: classes\n    },\n    children\n  );\n};\n\nexports.default = WithHover;\n\n//# sourceURL=webpack:///./client/src/admin/hocs/WithHover.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/admin/scss/index.scss":
-/*!******************************************!*\
-  !*** ./client/src/admin/scss/index.scss ***!
-  \******************************************/
+/***/ "./client/src/admin/hocs/WithTranslation.jsx":
+/*!***************************************************!*\
+  !*** ./client/src/admin/hocs/WithTranslation.jsx ***!
+  \***************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("\nvar content = __webpack_require__(/*! !../../../../node_modules/css-loader!../../../../node_modules/sass-loader/lib/loader.js!./index.scss */ \"./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./client/src/admin/scss/index.scss\");\n\nif(typeof content === 'string') content = [[module.i, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = __webpack_require__(/*! ../../../../node_modules/style-loader/lib/addStyles.js */ \"./node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(false) {}\n\n//# sourceURL=webpack:///./client/src/admin/scss/index.scss?");
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _context = __webpack_require__(/*! ../context */ \"./client/src/admin/context/index.js\");\n\nvar _context2 = _interopRequireDefault(_context);\n\nvar _translations = __webpack_require__(/*! ../data/translations */ \"./client/src/admin/data/translations.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar WithTranslation = function WithTranslation(key) {\n  var _useContext = (0, _react.useContext)(_context2.default),\n      lang = _useContext.lang;\n\n  return _translations.translations[lang][key] || _translations.translations[_translations.fallbackLanguage][key];\n};\n\nexports.default = WithTranslation;\n\n//# sourceURL=webpack:///./client/src/admin/hocs/WithTranslation.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/common/data/texts.js":
-/*!*****************************************!*\
-  !*** ./client/src/common/data/texts.js ***!
-  \*****************************************/
-/*! exports provided: default */
+/***/ "./client/src/admin/hocs/index.js":
+/*!****************************************!*\
+  !*** ./client/src/admin/hocs/index.js ***!
+  \****************************************/
+/*! exports provided: WithHover, t */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  \"en\": {\n    \"main-title\": \"Website Manager\",\n    \"login-to-admin\": \"Login to Admin Panel\",\n    \"login-info\": \"Put your user name and password, then click login button\",\n    \"login\": \"Login\",\n    \"user\": \"User name\",\n    \"password\": \"Password\",\n    \"no-saved-websites\": \"You don't have any saved projects, create a new one\",\n    \"create-new-project\": \"Create new project\",\n    \"create-new-project-hover\": \"Click to create new project\",\n    \"edit-current-project\": \"Edit current project\",\n    \"edit-current-project-hover\": \"Click to edit current active projecct\",\n    \"show-saved-projects\": \"Show saved projects\",\n    \"show-saved-projects-hover\": \"Click to show list of all saved projects\",\n    \"click-to-change-language\": \"Click to change language in the website manager\",\n    \"click-to-change-user\": \"Click to logout or change user password\",\n    \"logout\": \"Logout\",\n    \"click-to-logout\": \"Click to logout/change current user\",\n    \"user-settings\": \"User settings\",\n    \"click-to-change-user-settings\": \"Click to change user name, password or to completely remove current user\",\n  },\n  \"de\": {\n    \"main-title\": \"Website Manager\",\n  },\n  \"es\": {\n    \"main-title\": \"Website Manager\",\n  },\n  \"pl\": {\n    \"main-title\": \"Website Manager\",\n    \"no-saved-websites\": \"Nie masz jeszcze żadnych zapisanych projektów, utwórz nowy\",\n    \"create-new-project\": \"Utwórz nowy projekt\",\n    \"edit-current-project\": \"Edytuj bieżący projekt\",\n    \"show-saved-projects\": \"Pokaż zapisane projekty\",\n  },\n});\n\n\n//# sourceURL=webpack:///./client/src/common/data/texts.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _WithHover_jsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./WithHover.jsx */ \"./client/src/admin/hocs/WithHover.jsx\");\n/* harmony import */ var _WithHover_jsx__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_WithHover_jsx__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, \"WithHover\", function() { return _WithHover_jsx__WEBPACK_IMPORTED_MODULE_0___default.a; });\n/* harmony import */ var _WithTranslation_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./WithTranslation.jsx */ \"./client/src/admin/hocs/WithTranslation.jsx\");\n/* harmony import */ var _WithTranslation_jsx__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_WithTranslation_jsx__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, \"t\", function() { return _WithTranslation_jsx__WEBPACK_IMPORTED_MODULE_1___default.a; });\n\n\n\n\n\n\n//# sourceURL=webpack:///./client/src/admin/hocs/index.js?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/Info.jsx":
-/*!****************************************!*\
-  !*** ./client/src/common/jsx/Info.jsx ***!
-  \****************************************/
+/***/ "./client/src/admin/jsx/App.jsx":
+/*!**************************************!*\
+  !*** ./client/src/admin/jsx/App.jsx ***!
+  \**************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Info = function Info(_ref) {\n  var info = _ref.info,\n      hover = _ref.hover,\n      t = _ref.t;\n  return _react2.default.createElement(\n    \"p\",\n    { className: \"info\" },\n    hover ? t(hover) : t(info)\n  );\n};\n\nexports.default = Info;\n\n//# sourceURL=webpack:///./client/src/common/jsx/Info.jsx?");
+eval("\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\n__webpack_require__(/*! ../scss/index.scss */ \"./client/src/admin/scss/index.scss\");\n\nvar _TopBar = __webpack_require__(/*! ./TopBar.jsx */ \"./client/src/admin/jsx/TopBar.jsx\");\n\nvar _TopBar2 = _interopRequireDefault(_TopBar);\n\nvar _Info = __webpack_require__(/*! ./Info.jsx */ \"./client/src/admin/jsx/Info.jsx\");\n\nvar _Info2 = _interopRequireDefault(_Info);\n\nvar _MainScreen = __webpack_require__(/*! ./MainScreen.jsx */ \"./client/src/admin/jsx/MainScreen.jsx\");\n\nvar _MainScreen2 = _interopRequireDefault(_MainScreen);\n\nvar _context = __webpack_require__(/*! ../context */ \"./client/src/admin/context/index.js\");\n\nvar _context2 = _interopRequireDefault(_context);\n\nvar _translations = __webpack_require__(/*! ../data/translations */ \"./client/src/admin/data/translations.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar App = function App() {\n  var _useState = (0, _react.useState)(_translations.defaultLanguage),\n      _useState2 = _slicedToArray(_useState, 2),\n      lang = _useState2[0],\n      setLang = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      _useState4 = _slicedToArray(_useState3, 2),\n      projects = _useState4[0],\n      setProjects = _useState4[1];\n\n  var _useState5 = (0, _react.useState)(''),\n      _useState6 = _slicedToArray(_useState5, 2),\n      info = _useState6[0],\n      setInfo = _useState6[1];\n\n  var _useState7 = (0, _react.useState)(''),\n      _useState8 = _slicedToArray(_useState7, 2),\n      hover = _useState8[0],\n      setHover = _useState8[1];\n\n  var _useState9 = (0, _react.useState)('main'),\n      _useState10 = _slicedToArray(_useState9, 2),\n      view = _useState10[0],\n      setView = _useState10[1];\n\n  var _useState11 = (0, _react.useState)(null),\n      _useState12 = _slicedToArray(_useState11, 2),\n      user = _useState12[0],\n      setUser = _useState12[1];\n\n  (0, _react.useEffect)(function () {\n    setInfo('no-saved-websites');\n    setUser('admin@op.pl');\n  }, []);\n\n  return _react2.default.createElement(\n    _context2.default.Provider,\n    { value: { lang: lang, setHover: setHover, setInfo: setInfo } },\n    _react2.default.createElement(\n      'div',\n      { className: 'main' },\n      _react2.default.createElement(_TopBar2.default, { lang: lang, setLang: setLang, user: user, setUser: setUser }),\n      _react2.default.createElement(\n        'div',\n        { className: 'main__content' },\n        view === 'main' && _react2.default.createElement(_MainScreen2.default, { projects: projects })\n      ),\n      _react2.default.createElement(_Info2.default, { info: info, hover: hover })\n    )\n  );\n};\n\n_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));\n\n//# sourceURL=webpack:///./client/src/admin/jsx/App.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/LangSwitch.jsx":
-/*!**********************************************!*\
-  !*** ./client/src/common/jsx/LangSwitch.jsx ***!
-  \**********************************************/
+/***/ "./client/src/admin/jsx/Info.jsx":
+/*!***************************************!*\
+  !*** ./client/src/admin/jsx/Info.jsx ***!
+  \***************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _WithHover = __webpack_require__(/*! ./WithHover.jsx */ \"./client/src/common/jsx/WithHover.jsx\");\n\nvar _WithHover2 = _interopRequireDefault(_WithHover);\n\nvar _texts = __webpack_require__(/*! ../data/texts.js */ \"./client/src/common/data/texts.js\");\n\nvar _texts2 = _interopRequireDefault(_texts);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar LangSwitch = function LangSwitch(_ref) {\n  var lang = _ref.lang,\n      setLang = _ref.setLang,\n      setHover = _ref.setHover,\n      opened = _ref.opened,\n      setOpened = _ref.setOpened;\n\n\n  var handleSetLang = function handleSetLang(key) {\n    setLang(key);\n    setOpened(false);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'lang-switch' },\n    _react2.default.createElement(\n      _WithHover2.default,\n      { setHover: setHover, message: 'click-to-change-language' },\n      _react2.default.createElement(\n        'span',\n        {\n          className: 'lang-switch__main-item' + (opened === 'lang' ? ' lang-switch__main-item--active' : ''),\n          onClick: function onClick() {\n            return setOpened(opened !== 'lang' ? 'lang' : false);\n          }\n        },\n        lang\n      ),\n      opened === 'lang' && _react2.default.createElement(\n        'div',\n        { className: 'lang-switch__list' },\n        Object.keys(_texts2.default).map(function (key) {\n          return key !== lang && _react2.default.createElement(\n            'span',\n            {\n              className: 'lang-switch__item',\n              key: key,\n              onClick: function onClick() {\n                return handleSetLang(key);\n              }\n            },\n            key\n          );\n        })\n      )\n    )\n  );\n};\n\nexports.default = LangSwitch;\n\n//# sourceURL=webpack:///./client/src/common/jsx/LangSwitch.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _hocs = __webpack_require__(/*! ../hocs */ \"./client/src/admin/hocs/index.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Info = function Info(_ref) {\n  var info = _ref.info,\n      hover = _ref.hover;\n  return _react2.default.createElement(\n    'p',\n    { className: 'info' },\n    hover ? (0, _hocs.t)(hover) : (0, _hocs.t)(info)\n  );\n};\n\nexports.default = Info;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/Info.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/TopBar.jsx":
-/*!******************************************!*\
-  !*** ./client/src/common/jsx/TopBar.jsx ***!
-  \******************************************/
+/***/ "./client/src/admin/jsx/LangSwitch.jsx":
+/*!*********************************************!*\
+  !*** ./client/src/admin/jsx/LangSwitch.jsx ***!
+  \*********************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _LangSwitch = __webpack_require__(/*! ./LangSwitch.jsx */ \"./client/src/common/jsx/LangSwitch.jsx\");\n\nvar _LangSwitch2 = _interopRequireDefault(_LangSwitch);\n\nvar _User = __webpack_require__(/*! ./User.jsx */ \"./client/src/common/jsx/User.jsx\");\n\nvar _User2 = _interopRequireDefault(_User);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar TopBar = function TopBar(_ref) {\n  var user = _ref.user,\n      setUser = _ref.setUser,\n      setHover = _ref.setHover,\n      lang = _ref.lang,\n      setLang = _ref.setLang,\n      _ref$t = _ref.t,\n      t = _ref$t === undefined ? { t: t } : _ref$t;\n\n  var _useState = (0, _react.useState)(false),\n      _useState2 = _slicedToArray(_useState, 2),\n      opened = _useState2[0],\n      setOpened = _useState2[1];\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'top-bar' },\n    opened !== false && _react2.default.createElement('div', {\n      className: 'top-bar__fog',\n      onClick: function onClick() {\n        return setOpened(false);\n      }\n    }),\n    _react2.default.createElement(_LangSwitch2.default, {\n      lang: lang,\n      setLang: setLang,\n      setHover: setHover,\n      opened: opened,\n      setOpened: setOpened\n    }),\n    user && _react2.default.createElement(_User2.default, {\n      user: user,\n      setUser: setUser,\n      setHover: setHover,\n      t: t,\n      opened: opened,\n      setOpened: setOpened\n    })\n  );\n};\n\nexports.default = TopBar;\n\n//# sourceURL=webpack:///./client/src/common/jsx/TopBar.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _hocs = __webpack_require__(/*! ../hocs */ \"./client/src/admin/hocs/index.js\");\n\nvar _translations = __webpack_require__(/*! ../data/translations.js */ \"./client/src/admin/data/translations.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar LangSwitch = function LangSwitch(_ref) {\n  var lang = _ref.lang,\n      setLang = _ref.setLang,\n      opened = _ref.opened,\n      setOpened = _ref.setOpened;\n\n  var handleSetLang = function handleSetLang(key) {\n    setLang(key);\n    setOpened(false);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'lang-switch' },\n    _react2.default.createElement(\n      _hocs.WithHover,\n      { message: 'click-to-change-language' },\n      _react2.default.createElement(\n        'span',\n        {\n          className: 'lang-switch__main-item' + (opened === 'lang' ? ' lang-switch__main-item--active' : ''),\n          onClick: function onClick() {\n            return setOpened(opened !== 'lang' ? 'lang' : false);\n          }\n        },\n        lang\n      ),\n      opened === 'lang' && _react2.default.createElement(\n        'div',\n        { className: 'lang-switch__list' },\n        _translations.languages.map(function (key) {\n          return key !== lang && _react2.default.createElement(\n            'span',\n            {\n              className: 'lang-switch__item',\n              key: key,\n              onClick: function onClick() {\n                return handleSetLang(key);\n              }\n            },\n            key\n          );\n        })\n      )\n    )\n  );\n};\n\nexports.default = LangSwitch;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/LangSwitch.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/User.jsx":
-/*!****************************************!*\
-  !*** ./client/src/common/jsx/User.jsx ***!
-  \****************************************/
+/***/ "./client/src/admin/jsx/MainScreen.jsx":
+/*!*********************************************!*\
+  !*** ./client/src/admin/jsx/MainScreen.jsx ***!
+  \*********************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _WithHover = __webpack_require__(/*! ./WithHover.jsx */ \"./client/src/common/jsx/WithHover.jsx\");\n\nvar _WithHover2 = _interopRequireDefault(_WithHover);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar User = function User(_ref) {\n  var user = _ref.user,\n      setUser = _ref.setUser,\n      setHover = _ref.setHover,\n      t = _ref.t,\n      opened = _ref.opened,\n      setOpened = _ref.setOpened;\n\n  var handleLogout = function handleLogout() {\n    setOpened(false);\n    setUser(null);\n  };\n  var handleChangePass = function handleChangePass() {\n    setOpened(false);\n  };\n  var handleRemoveUser = function handleRemoveUser() {\n    setOpened(false);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'user' },\n    _react2.default.createElement(\n      _WithHover2.default,\n      { setHover: setHover, message: 'click-to-change-user' },\n      _react2.default.createElement(\n        'span',\n        {\n          className: 'user__main-item' + (opened === 'user' ? ' user__main-item--active' : ''),\n          onClick: function onClick() {\n            return setOpened(opened !== 'user' ? 'user' : false);\n          }\n        },\n        user\n      ),\n      opened === 'user' && _react2.default.createElement(\n        'div',\n        { className: 'user__list' },\n        _react2.default.createElement(\n          _WithHover2.default,\n          { setHover: setHover, message: 'click-to-logout' },\n          _react2.default.createElement(\n            'span',\n            { className: 'user__item', onClick: handleLogout },\n            t('logout')\n          )\n        ),\n        _react2.default.createElement(\n          _WithHover2.default,\n          { setHover: setHover, message: 'click-to-change-user-settings' },\n          _react2.default.createElement(\n            'span',\n            { className: 'user__item', onClick: handleChangePass },\n            t('user-settings')\n          )\n        )\n      )\n    )\n  );\n};\n\nexports.default = User;\n\n//# sourceURL=webpack:///./client/src/common/jsx/User.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _hocs = __webpack_require__(/*! ../hocs */ \"./client/src/admin/hocs/index.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar MainScreen = function MainScreen(_ref) {\n  var projects = _ref.projects;\n  return _react2.default.createElement(\n    'div',\n    { className: 'main-screen' },\n    _react2.default.createElement(\n      'h1',\n      { className: 'main-screen__header' },\n      (0, _hocs.t)('main-title')\n    ),\n    _react2.default.createElement(\n      'div',\n      { className: 'main-screen__list' },\n      !projects.length && _react2.default.createElement(\n        _hocs.WithHover,\n        { message: 'edit-current-project-hover' },\n        _react2.default.createElement(\n          'p',\n          { className: 'main-screen__item' },\n          (0, _hocs.t)('edit-current-project')\n        )\n      ),\n      !projects.length && _react2.default.createElement(\n        _hocs.WithHover,\n        { message: 'show-saved-projects-hover' },\n        _react2.default.createElement(\n          'p',\n          { className: 'main-screen__item' },\n          (0, _hocs.t)('show-saved-projects')\n        )\n      ),\n      _react2.default.createElement(\n        _hocs.WithHover,\n        { message: 'create-new-project-hover' },\n        _react2.default.createElement(\n          'p',\n          { className: 'main-screen__item' },\n          (0, _hocs.t)('create-new-project')\n        )\n      )\n    )\n  );\n};\n\nexports.default = MainScreen;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/MainScreen.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/WithHover.jsx":
-/*!*********************************************!*\
-  !*** ./client/src/common/jsx/WithHover.jsx ***!
-  \*********************************************/
+/***/ "./client/src/admin/jsx/TopBar.jsx":
+/*!*****************************************!*\
+  !*** ./client/src/admin/jsx/TopBar.jsx ***!
+  \*****************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _LangSwitch = __webpack_require__(/*! ./LangSwitch.jsx */ \"./client/src/admin/jsx/LangSwitch.jsx\");\n\nvar _LangSwitch2 = _interopRequireDefault(_LangSwitch);\n\nvar _User = __webpack_require__(/*! ./User.jsx */ \"./client/src/admin/jsx/User.jsx\");\n\nvar _User2 = _interopRequireDefault(_User);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar TopBar = function TopBar(_ref) {\n  var user = _ref.user,\n      setUser = _ref.setUser,\n      lang = _ref.lang,\n      setLang = _ref.setLang;\n\n  var _useState = (0, _react.useState)(false),\n      _useState2 = _slicedToArray(_useState, 2),\n      opened = _useState2[0],\n      setOpened = _useState2[1];\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'top-bar' },\n    opened !== false && _react2.default.createElement('div', {\n      className: 'top-bar__fog',\n      onClick: function onClick() {\n        return setOpened(false);\n      }\n    }),\n    _react2.default.createElement(_LangSwitch2.default, {\n      lang: lang,\n      setLang: setLang,\n      opened: opened,\n      setOpened: setOpened\n    }),\n    user && _react2.default.createElement(_User2.default, {\n      user: user,\n      setUser: setUser,\n      opened: opened,\n      setOpened: setOpened\n    })\n  );\n};\n\nexports.default = TopBar;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/TopBar.jsx?");
+
+/***/ }),
+
+/***/ "./client/src/admin/jsx/User.jsx":
+/*!***************************************!*\
+  !*** ./client/src/admin/jsx/User.jsx ***!
+  \***************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar WithHover = function WithHover(_ref) {\n  var children = _ref.children,\n      setHover = _ref.setHover,\n      message = _ref.message,\n      classes = _ref.classes;\n  return _react2.default.createElement(\n    'div',\n    {\n      onMouseEnter: function onMouseEnter() {\n        return setHover(message);\n      },\n      onMouseLeave: function onMouseLeave() {\n        return setHover(null);\n      },\n      className: classes\n    },\n    children\n  );\n};\n\nexports.default = WithHover;\n\n//# sourceURL=webpack:///./client/src/common/jsx/WithHover.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _hocs = __webpack_require__(/*! ../hocs */ \"./client/src/admin/hocs/index.js\");\n\nvar _logout = __webpack_require__(/*! ../api/logout */ \"./client/src/admin/api/logout.js\");\n\nvar _logout2 = _interopRequireDefault(_logout);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar User = function User(_ref) {\n  var user = _ref.user,\n      setUser = _ref.setUser,\n      opened = _ref.opened,\n      setOpened = _ref.setOpened;\n\n  var handleLogout = function handleLogout() {\n    setOpened(false);\n    (0, _logout2.default)();\n  };\n  var handleChangePass = function handleChangePass() {\n    setOpened(false);\n  };\n  var handleRemoveUser = function handleRemoveUser() {\n    setOpened(false);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'user' },\n    _react2.default.createElement(\n      _hocs.WithHover,\n      { message: 'click-to-change-user' },\n      _react2.default.createElement(\n        'span',\n        {\n          className: 'user__main-item' + (opened === 'user' ? ' user__main-item--active' : ''),\n          onClick: function onClick() {\n            return setOpened(opened !== 'user' ? 'user' : false);\n          }\n        },\n        user\n      ),\n      opened === 'user' && _react2.default.createElement(\n        'div',\n        { className: 'user__list' },\n        _react2.default.createElement(\n          _hocs.WithHover,\n          { message: 'click-to-logout' },\n          _react2.default.createElement(\n            'span',\n            { className: 'user__item', onClick: handleLogout },\n            (0, _hocs.t)('logout')\n          )\n        ),\n        _react2.default.createElement(\n          _hocs.WithHover,\n          { message: 'click-to-change-user-settings' },\n          _react2.default.createElement(\n            'span',\n            { className: 'user__item', onClick: handleChangePass },\n            (0, _hocs.t)('user-settings')\n          )\n        )\n      )\n    )\n  );\n};\n\nexports.default = User;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/User.jsx?");
+
+/***/ }),
+
+/***/ "./client/src/admin/scss/index.scss":
+/*!******************************************!*\
+  !*** ./client/src/admin/scss/index.scss ***!
+  \******************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("\nvar content = __webpack_require__(/*! !../../../../node_modules/css-loader!../../../../node_modules/sass-loader/lib/loader.js!./index.scss */ \"./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./client/src/admin/scss/index.scss\");\n\nif(typeof content === 'string') content = [[module.i, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = __webpack_require__(/*! ../../../../node_modules/style-loader/lib/addStyles.js */ \"./node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(false) {}\n\n//# sourceURL=webpack:///./client/src/admin/scss/index.scss?");
 
 /***/ }),
 
@@ -200,7 +248,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("exports = module.exports = __webpack_require__(/*! ../../../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"* {\\n  box-sizing: border-box; }\\n\\nhtml, body, div, span, applet, object, iframe,\\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\\na, abbr, acronym, address, big, cite, code,\\ndel, dfn, em, img, ins, kbd, q, s, samp,\\nsmall, strike, strong, sub, sup, tt, var,\\nb, u, i, center,\\ndl, dt, dd, ol, ul, li,\\nfieldset, form, label, legend,\\ntable, caption, tbody, tfoot, thead, tr, th, td,\\narticle, aside, canvas, details, embed,\\nfigure, figcaption, footer, header, hgroup,\\nmenu, nav, output, ruby, section, summary,\\ntime, mark, audio, video {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline; }\\n\\narticle, aside, details, figcaption, figure,\\nfooter, header, hgroup, menu, nav, section {\\n  display: block; }\\n\\nbody {\\n  line-height: 1; }\\n\\nol, ul {\\n  list-style: none; }\\n\\nblockquote, q {\\n  quotes: none; }\\n\\nblockquote:before, blockquote:after,\\nq:before, q:after {\\n  content: '';\\n  content: none; }\\n\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0; }\\n\\nhtml {\\n  min-width: 320px;\\n  background: white; }\\n\\nhtml {\\n  background: #181818; }\\n\\n* {\\n  -webkit-user-select: none;\\n  -khtml-user-select: none;\\n  -moz-user-select: -moz-none;\\n  -o-user-select: none;\\n  user-select: none; }\\n\\n.text-input {\\n  text-align: left;\\n  margin-bottom: 1.5em;\\n  transition: all .3s;\\n  cursor: text; }\\n  .text-input:focus-within {\\n    transform: scale(1.05, 1.05); }\\n\\n.text-input-label {\\n  font-size: 1.25em;\\n  width: 100%;\\n  color: #aaa;\\n  display: block;\\n  transform: translateY(-1.75em);\\n  transform-origin: 0 0;\\n  transition: all .3s;\\n  z-index: -1;\\n  cursor: text; }\\n\\n.text-input-field {\\n  font-size: 1.5rem;\\n  box-shadow: none;\\n  background: #181818;\\n  color: #fff;\\n  border-radius: 0;\\n  border-color: #ccc;\\n  border-style: none none solid none;\\n  width: 100%;\\n  transition: all .5s;\\n  padding: 5px; }\\n  .text-input-field::placeholder {\\n    color: transparent; }\\n  .text-input-field:focus {\\n    box-shadow: none;\\n    outline: none;\\n    border-color: orange; }\\n  .text-input-field:focus + .text-input-label,\\n  .text-input-field:not(:placeholder-shown) + .text-input-label {\\n    transform: translateY(-3em) scale(0.8); }\\n\\n.main {\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: space-between;\\n  position: fixed;\\n  top: 0;\\n  right: 0;\\n  bottom: 0;\\n  left: 0; }\\n  .main__content {\\n    flex-grow: 1;\\n    display: flex;\\n    flex-direction: column; }\\n\\n.info {\\n  display: block;\\n  color: #ddd;\\n  flex-grow: 0;\\n  text-align: center;\\n  padding-bottom: 3vh;\\n  padding-top: 3vh; }\\n\\n@keyframes showTopMenu {\\n  0% {\\n    transform: translateY(100%) scale(0.8);\\n    opacity: 0; }\\n  80% {\\n    transform: translateY(100%) scale(1.1);\\n    opacity: 100%; }\\n  100% {\\n    transform: translateY(100%) scale(1);\\n    opacity: 100%; } }\\n\\n.top-bar {\\n  flex-grow: 0;\\n  display: flex;\\n  justify-content: end;\\n  padding: 1em; }\\n  .top-bar__fog {\\n    position: fixed;\\n    top: 0;\\n    right: 0;\\n    bottom: 0;\\n    left: 0; }\\n\\n.user {\\n  position: relative; }\\n  .user__list {\\n    position: absolute;\\n    display: block;\\n    bottom: 0;\\n    right: 0;\\n    transform: translateY(100%);\\n    background: #222;\\n    animation: showTopMenu .3s; }\\n  .user__main-item {\\n    color: white;\\n    display: block;\\n    padding: .5em;\\n    white-space: nowrap;\\n    transition: color .3s;\\n    cursor: pointer; }\\n    .user__main-item--active {\\n      background: #222;\\n      color: yellow; }\\n    .user__main-item:hover {\\n      color: yellow; }\\n  .user__item {\\n    display: block;\\n    color: white;\\n    padding: .5em;\\n    font-weight: normal;\\n    transition: color .3s;\\n    cursor: pointer;\\n    white-space: nowrap;\\n    text-align: right; }\\n    .user__item:hover {\\n      color: yellow; }\\n\\n.lang-switch {\\n  display: inline-block;\\n  position: relative; }\\n  .lang-switch__list {\\n    position: absolute;\\n    bottom: 0;\\n    left: 0;\\n    right: 0;\\n    transform: translateY(100%);\\n    background: #222;\\n    animation: showTopMenu .3s; }\\n  .lang-switch__main-item {\\n    transition: .3s color;\\n    padding: .5em;\\n    display: block;\\n    color: white;\\n    font-weight: normal;\\n    cursor: pointer; }\\n    .lang-switch__main-item:hover {\\n      color: yellow; }\\n    .lang-switch__main-item--active {\\n      background: #222;\\n      color: yellow; }\\n  .lang-switch__item {\\n    padding: .5em;\\n    display: block;\\n    color: white;\\n    font-weight: normal;\\n    cursor: pointer;\\n    transition: color .3s; }\\n    .lang-switch__item:hover {\\n      color: yellow; }\\n\\n.main-screen {\\n  text-align: center; }\\n  .main-screen__header {\\n    display: block;\\n    margin-top: 10vh;\\n    margin-bottom: 20vh;\\n    font-size: 300%;\\n    color: white;\\n    text-align: center; }\\n  .main-screen__list {\\n    display: inline-block; }\\n  .main-screen__item {\\n    font-size: 175%;\\n    color: white;\\n    transition: color .3s;\\n    cursor: pointer;\\n    margin-top: 5vh;\\n    margin-bottom: 5vh; }\\n    .main-screen__item:hover {\\n      color: orange; }\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./client/src/admin/scss/index.scss?./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js");
+eval("exports = module.exports = __webpack_require__(/*! ../../../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"* {\\n  box-sizing: border-box; }\\n\\nhtml, body, div, span, applet, object, iframe,\\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\\na, abbr, acronym, address, big, cite, code,\\ndel, dfn, em, img, ins, kbd, q, s, samp,\\nsmall, strike, strong, sub, sup, tt, var,\\nb, u, i, center,\\ndl, dt, dd, ol, ul, li,\\nfieldset, form, label, legend,\\ntable, caption, tbody, tfoot, thead, tr, th, td,\\narticle, aside, canvas, details, embed,\\nfigure, figcaption, footer, header, hgroup,\\nmenu, nav, output, ruby, section, summary,\\ntime, mark, audio, video {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline; }\\n\\narticle, aside, details, figcaption, figure,\\nfooter, header, hgroup, menu, nav, section {\\n  display: block; }\\n\\nbody {\\n  line-height: 1; }\\n\\nol, ul {\\n  list-style: none; }\\n\\nblockquote, q {\\n  quotes: none; }\\n\\nblockquote:before, blockquote:after,\\nq:before, q:after {\\n  content: '';\\n  content: none; }\\n\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0; }\\n\\nhtml {\\n  min-width: 320px;\\n  background: white; }\\n\\nhtml {\\n  background: #181818; }\\n\\n* {\\n  -webkit-user-select: none;\\n  -khtml-user-select: none;\\n  -moz-user-select: -moz-none;\\n  -o-user-select: none;\\n  user-select: none; }\\n\\n.text-input {\\n  text-align: left;\\n  margin-bottom: 1.5em;\\n  transition: all .3s;\\n  cursor: text; }\\n  .text-input:focus-within {\\n    transform: scale(1.05, 1.05); }\\n\\n.text-input-label {\\n  font-size: 1.25em;\\n  width: 100%;\\n  color: #aaa;\\n  display: block;\\n  transform: translateY(-1.75em);\\n  transform-origin: 0 0;\\n  transition: all .3s;\\n  z-index: -1;\\n  cursor: text; }\\n\\n.text-input-field {\\n  font-size: 1.5rem;\\n  box-shadow: none;\\n  background: #181818;\\n  color: #fff;\\n  border-radius: 0;\\n  border-color: #ccc;\\n  border-style: none none solid none;\\n  width: 100%;\\n  transition: all .5s;\\n  padding: 5px; }\\n  .text-input-field::placeholder {\\n    color: transparent; }\\n  .text-input-field:focus {\\n    box-shadow: none;\\n    outline: none;\\n    border-color: orange; }\\n  .text-input-field:focus + .text-input-label,\\n  .text-input-field:not(:placeholder-shown) + .text-input-label {\\n    transform: translateY(-3em) scale(0.8); }\\n\\n.main {\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: space-between;\\n  position: fixed;\\n  top: 0;\\n  right: 0;\\n  bottom: 0;\\n  left: 0; }\\n  .main__content {\\n    flex-grow: 1;\\n    display: flex;\\n    flex-direction: column; }\\n\\n.info {\\n  display: block;\\n  color: #ddd;\\n  flex-grow: 0;\\n  text-align: center;\\n  padding-bottom: 3vh;\\n  padding-top: 3vh; }\\n\\n@keyframes showTopMenu {\\n  0% {\\n    transform: translateY(100%) scale(0.8);\\n    opacity: 0; }\\n  80% {\\n    transform: translateY(100%) scale(1.1);\\n    opacity: 100%; }\\n  100% {\\n    transform: translateY(100%) scale(1);\\n    opacity: 100%; } }\\n\\n.top-bar {\\n  flex-grow: 0;\\n  display: flex;\\n  justify-content: end;\\n  padding: 1em; }\\n  .top-bar__fog {\\n    position: fixed;\\n    top: 0;\\n    right: 0;\\n    bottom: 0;\\n    left: 0; }\\n\\n.user {\\n  position: relative; }\\n  .user__list {\\n    position: absolute;\\n    display: block;\\n    bottom: 0;\\n    right: 0;\\n    transform: translateY(100%);\\n    background: #222;\\n    animation: showTopMenu .3s; }\\n  .user__main-item {\\n    color: #fff;\\n    display: block;\\n    padding: .5em;\\n    white-space: nowrap;\\n    transition: color .3s;\\n    cursor: pointer; }\\n    .user__main-item--active {\\n      background: #222;\\n      color: orange; }\\n    .user__main-item:hover {\\n      color: orange; }\\n  .user__item {\\n    display: block;\\n    color: #fff;\\n    padding: .5em;\\n    font-weight: normal;\\n    transition: color .3s;\\n    cursor: pointer;\\n    white-space: nowrap;\\n    text-align: right; }\\n    .user__item:hover {\\n      color: orange; }\\n\\n.lang-switch {\\n  display: inline-block;\\n  position: relative; }\\n  .lang-switch__list {\\n    position: absolute;\\n    bottom: 0;\\n    left: 0;\\n    right: 0;\\n    transform: translateY(100%);\\n    background: #222;\\n    animation: showTopMenu .3s; }\\n  .lang-switch__main-item {\\n    transition: .3s color;\\n    padding: .5em;\\n    display: block;\\n    color: #fff;\\n    font-weight: normal;\\n    cursor: pointer; }\\n    .lang-switch__main-item:hover {\\n      color: orange; }\\n    .lang-switch__main-item--active {\\n      background: #222;\\n      color: orange; }\\n  .lang-switch__item {\\n    padding: .5em;\\n    display: block;\\n    color: #fff;\\n    font-weight: normal;\\n    cursor: pointer;\\n    transition: color .3s; }\\n    .lang-switch__item:hover {\\n      color: orange; }\\n\\n.main-screen {\\n  text-align: center; }\\n  .main-screen__header {\\n    display: block;\\n    margin-top: 10vh;\\n    margin-bottom: 20vh;\\n    font-size: 300%;\\n    color: white;\\n    text-align: center; }\\n  .main-screen__list {\\n    display: inline-block; }\\n  .main-screen__item {\\n    font-size: 175%;\\n    color: white;\\n    transition: color .3s;\\n    cursor: pointer;\\n    margin-top: 5vh;\\n    margin-bottom: 5vh; }\\n    .main-screen__item:hover {\\n      color: orange; }\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./client/src/admin/scss/index.scss?./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js");
 
 /***/ }),
 
diff --git a/client/login/out.js b/client/login/out.js
index 7c1c399..0381910 100644
--- a/client/login/out.js
+++ b/client/login/out.js
@@ -86,75 +86,135 @@
 /************************************************************************/
 /******/ ({
 
-/***/ "./client/src/common/data/texts.js":
-/*!*****************************************!*\
-  !*** ./client/src/common/data/texts.js ***!
-  \*****************************************/
+/***/ "./client/src/admin/api/logout.js":
+/*!****************************************!*\
+  !*** ./client/src/admin/api/logout.js ***!
+  \****************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  \"en\": {\n    \"main-title\": \"Website Manager\",\n    \"login-to-admin\": \"Login to Admin Panel\",\n    \"login-info\": \"Put your user name and password, then click login button\",\n    \"login\": \"Login\",\n    \"user\": \"User name\",\n    \"password\": \"Password\",\n    \"no-saved-websites\": \"You don't have any saved projects, create a new one\",\n    \"create-new-project\": \"Create new project\",\n    \"create-new-project-hover\": \"Click to create new project\",\n    \"edit-current-project\": \"Edit current project\",\n    \"edit-current-project-hover\": \"Click to edit current active projecct\",\n    \"show-saved-projects\": \"Show saved projects\",\n    \"show-saved-projects-hover\": \"Click to show list of all saved projects\",\n    \"click-to-change-language\": \"Click to change language in the website manager\",\n    \"click-to-change-user\": \"Click to logout or change user password\",\n    \"logout\": \"Logout\",\n    \"click-to-logout\": \"Click to logout/change current user\",\n    \"user-settings\": \"User settings\",\n    \"click-to-change-user-settings\": \"Click to change user name, password or to completely remove current user\",\n  },\n  \"de\": {\n    \"main-title\": \"Website Manager\",\n  },\n  \"es\": {\n    \"main-title\": \"Website Manager\",\n  },\n  \"pl\": {\n    \"main-title\": \"Website Manager\",\n    \"no-saved-websites\": \"Nie masz jeszcze żadnych zapisanych projektów, utwórz nowy\",\n    \"create-new-project\": \"Utwórz nowy projekt\",\n    \"edit-current-project\": \"Edytuj bieżący projekt\",\n    \"show-saved-projects\": \"Pokaż zapisane projekty\",\n  },\n});\n\n\n//# sourceURL=webpack:///./client/src/common/data/texts.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (() => (\n  fetch('/api/user/logout', {\n    method: 'POST',\n  })\n  .then(() => window.location.href = \"/\")\n  .catch(() => {})\n));\n\n\n//# sourceURL=webpack:///./client/src/admin/api/logout.js?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/Info.jsx":
-/*!****************************************!*\
-  !*** ./client/src/common/jsx/Info.jsx ***!
-  \****************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ "./client/src/admin/context/index.js":
+/*!*******************************************!*\
+  !*** ./client/src/admin/context/index.js ***!
+  \*******************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext());\n\n\n//# sourceURL=webpack:///./client/src/admin/context/index.js?");
+
+/***/ }),
+
+/***/ "./client/src/admin/data/translations.js":
+/*!***********************************************!*\
+  !*** ./client/src/admin/data/translations.js ***!
+  \***********************************************/
+/*! exports provided: defaultLanguage, fallbackLanguage, translations, languages */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Info = function Info(_ref) {\n  var info = _ref.info,\n      hover = _ref.hover,\n      t = _ref.t;\n  return _react2.default.createElement(\n    \"p\",\n    { className: \"info\" },\n    hover ? t(hover) : t(info)\n  );\n};\n\nexports.default = Info;\n\n//# sourceURL=webpack:///./client/src/common/jsx/Info.jsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"defaultLanguage\", function() { return defaultLanguage; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"fallbackLanguage\", function() { return fallbackLanguage; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"translations\", function() { return translations; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"languages\", function() { return languages; });\nconst defaultLanguage = 'en';\nconst fallbackLanguage = 'en';\nconst translations = {\n  \"en\": {\n    \"main-title\": \"Website Manager\",\n    \"login-to-admin\": \"Login to Admin Panel\",\n    \"login-info\": \"Put your user name and password, then click login button\",\n    \"login\": \"Login\",\n    \"user\": \"User name\",\n    \"password\": \"Password\",\n    \"no-saved-websites\": \"You don't have any saved projects, create a new one\",\n    \"create-new-project\": \"Create new project\",\n    \"create-new-project-hover\": \"Click to create new project\",\n    \"edit-current-project\": \"Edit current project\",\n    \"edit-current-project-hover\": \"Click to edit current active projecct\",\n    \"show-saved-projects\": \"Show saved projects\",\n    \"show-saved-projects-hover\": \"Click to show list of all saved projects\",\n    \"click-to-change-language\": \"Click to change language in the website manager\",\n    \"click-to-change-user\": \"Click to logout or change user password\",\n    \"logout\": \"Logout\",\n    \"click-to-logout\": \"Click to logout/change current user\",\n    \"user-settings\": \"User settings\",\n    \"click-to-change-user-settings\": \"Click to change user name, password or to completely remove current user\",\n  },\n  \"de\": {\n    \"main-title\": \"Website Manager\",\n  },\n  \"es\": {\n    \"main-title\": \"Website Manager\",\n  },\n  \"pl\": {\n    \"main-title\": \"Website Manager\",\n    \"login-to-admin\": \"Zaloguj do Panelu Administracyjnego\",\n    \"no-saved-websites\": \"Nie masz jeszcze żadnych zapisanych projektów, utwórz nowy\",\n    \"create-new-project\": \"Utwórz nowy projekt\",\n    \"edit-current-project\": \"Edytuj bieżący projekt\",\n    \"show-saved-projects\": \"Pokaż zapisane projekty\",\n  },\n};\n\nconst languages = Object.keys(translations);\n\n\n//# sourceURL=webpack:///./client/src/admin/data/translations.js?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/LangSwitch.jsx":
-/*!**********************************************!*\
-  !*** ./client/src/common/jsx/LangSwitch.jsx ***!
-  \**********************************************/
+/***/ "./client/src/admin/hocs/WithHover.jsx":
+/*!*********************************************!*\
+  !*** ./client/src/admin/hocs/WithHover.jsx ***!
+  \*********************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _WithHover = __webpack_require__(/*! ./WithHover.jsx */ \"./client/src/common/jsx/WithHover.jsx\");\n\nvar _WithHover2 = _interopRequireDefault(_WithHover);\n\nvar _texts = __webpack_require__(/*! ../data/texts.js */ \"./client/src/common/data/texts.js\");\n\nvar _texts2 = _interopRequireDefault(_texts);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar LangSwitch = function LangSwitch(_ref) {\n  var lang = _ref.lang,\n      setLang = _ref.setLang,\n      setHover = _ref.setHover,\n      opened = _ref.opened,\n      setOpened = _ref.setOpened;\n\n\n  var handleSetLang = function handleSetLang(key) {\n    setLang(key);\n    setOpened(false);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'lang-switch' },\n    _react2.default.createElement(\n      _WithHover2.default,\n      { setHover: setHover, message: 'click-to-change-language' },\n      _react2.default.createElement(\n        'span',\n        {\n          className: 'lang-switch__main-item' + (opened === 'lang' ? ' lang-switch__main-item--active' : ''),\n          onClick: function onClick() {\n            return setOpened(opened !== 'lang' ? 'lang' : false);\n          }\n        },\n        lang\n      ),\n      opened === 'lang' && _react2.default.createElement(\n        'div',\n        { className: 'lang-switch__list' },\n        Object.keys(_texts2.default).map(function (key) {\n          return key !== lang && _react2.default.createElement(\n            'span',\n            {\n              className: 'lang-switch__item',\n              key: key,\n              onClick: function onClick() {\n                return handleSetLang(key);\n              }\n            },\n            key\n          );\n        })\n      )\n    )\n  );\n};\n\nexports.default = LangSwitch;\n\n//# sourceURL=webpack:///./client/src/common/jsx/LangSwitch.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _context = __webpack_require__(/*! ../context */ \"./client/src/admin/context/index.js\");\n\nvar _context2 = _interopRequireDefault(_context);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar WithHover = function WithHover(_ref) {\n  var children = _ref.children,\n      message = _ref.message,\n      classes = _ref.classes;\n\n  var _useContext = (0, _react.useContext)(_context2.default),\n      setHover = _useContext.setHover;\n\n  return _react2.default.createElement(\n    'div',\n    {\n      onMouseEnter: function onMouseEnter() {\n        return setHover(message);\n      },\n      onMouseLeave: function onMouseLeave() {\n        return setHover(null);\n      },\n      className: classes\n    },\n    children\n  );\n};\n\nexports.default = WithHover;\n\n//# sourceURL=webpack:///./client/src/admin/hocs/WithHover.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/TopBar.jsx":
-/*!******************************************!*\
-  !*** ./client/src/common/jsx/TopBar.jsx ***!
-  \******************************************/
+/***/ "./client/src/admin/hocs/WithTranslation.jsx":
+/*!***************************************************!*\
+  !*** ./client/src/admin/hocs/WithTranslation.jsx ***!
+  \***************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _LangSwitch = __webpack_require__(/*! ./LangSwitch.jsx */ \"./client/src/common/jsx/LangSwitch.jsx\");\n\nvar _LangSwitch2 = _interopRequireDefault(_LangSwitch);\n\nvar _User = __webpack_require__(/*! ./User.jsx */ \"./client/src/common/jsx/User.jsx\");\n\nvar _User2 = _interopRequireDefault(_User);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar TopBar = function TopBar(_ref) {\n  var user = _ref.user,\n      setUser = _ref.setUser,\n      setHover = _ref.setHover,\n      lang = _ref.lang,\n      setLang = _ref.setLang,\n      _ref$t = _ref.t,\n      t = _ref$t === undefined ? { t: t } : _ref$t;\n\n  var _useState = (0, _react.useState)(false),\n      _useState2 = _slicedToArray(_useState, 2),\n      opened = _useState2[0],\n      setOpened = _useState2[1];\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'top-bar' },\n    opened !== false && _react2.default.createElement('div', {\n      className: 'top-bar__fog',\n      onClick: function onClick() {\n        return setOpened(false);\n      }\n    }),\n    _react2.default.createElement(_LangSwitch2.default, {\n      lang: lang,\n      setLang: setLang,\n      setHover: setHover,\n      opened: opened,\n      setOpened: setOpened\n    }),\n    user && _react2.default.createElement(_User2.default, {\n      user: user,\n      setUser: setUser,\n      setHover: setHover,\n      t: t,\n      opened: opened,\n      setOpened: setOpened\n    })\n  );\n};\n\nexports.default = TopBar;\n\n//# sourceURL=webpack:///./client/src/common/jsx/TopBar.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _context = __webpack_require__(/*! ../context */ \"./client/src/admin/context/index.js\");\n\nvar _context2 = _interopRequireDefault(_context);\n\nvar _translations = __webpack_require__(/*! ../data/translations */ \"./client/src/admin/data/translations.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar WithTranslation = function WithTranslation(key) {\n  var _useContext = (0, _react.useContext)(_context2.default),\n      lang = _useContext.lang;\n\n  return _translations.translations[lang][key] || _translations.translations[_translations.fallbackLanguage][key];\n};\n\nexports.default = WithTranslation;\n\n//# sourceURL=webpack:///./client/src/admin/hocs/WithTranslation.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/User.jsx":
+/***/ "./client/src/admin/hocs/index.js":
 /*!****************************************!*\
-  !*** ./client/src/common/jsx/User.jsx ***!
+  !*** ./client/src/admin/hocs/index.js ***!
   \****************************************/
+/*! exports provided: WithHover, t */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _WithHover_jsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./WithHover.jsx */ \"./client/src/admin/hocs/WithHover.jsx\");\n/* harmony import */ var _WithHover_jsx__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_WithHover_jsx__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, \"WithHover\", function() { return _WithHover_jsx__WEBPACK_IMPORTED_MODULE_0___default.a; });\n/* harmony import */ var _WithTranslation_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./WithTranslation.jsx */ \"./client/src/admin/hocs/WithTranslation.jsx\");\n/* harmony import */ var _WithTranslation_jsx__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_WithTranslation_jsx__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, \"t\", function() { return _WithTranslation_jsx__WEBPACK_IMPORTED_MODULE_1___default.a; });\n\n\n\n\n\n\n//# sourceURL=webpack:///./client/src/admin/hocs/index.js?");
+
+/***/ }),
+
+/***/ "./client/src/admin/jsx/Info.jsx":
+/*!***************************************!*\
+  !*** ./client/src/admin/jsx/Info.jsx ***!
+  \***************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _WithHover = __webpack_require__(/*! ./WithHover.jsx */ \"./client/src/common/jsx/WithHover.jsx\");\n\nvar _WithHover2 = _interopRequireDefault(_WithHover);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar User = function User(_ref) {\n  var user = _ref.user,\n      setUser = _ref.setUser,\n      setHover = _ref.setHover,\n      t = _ref.t,\n      opened = _ref.opened,\n      setOpened = _ref.setOpened;\n\n  var handleLogout = function handleLogout() {\n    setOpened(false);\n    setUser(null);\n  };\n  var handleChangePass = function handleChangePass() {\n    setOpened(false);\n  };\n  var handleRemoveUser = function handleRemoveUser() {\n    setOpened(false);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'user' },\n    _react2.default.createElement(\n      _WithHover2.default,\n      { setHover: setHover, message: 'click-to-change-user' },\n      _react2.default.createElement(\n        'span',\n        {\n          className: 'user__main-item' + (opened === 'user' ? ' user__main-item--active' : ''),\n          onClick: function onClick() {\n            return setOpened(opened !== 'user' ? 'user' : false);\n          }\n        },\n        user\n      ),\n      opened === 'user' && _react2.default.createElement(\n        'div',\n        { className: 'user__list' },\n        _react2.default.createElement(\n          _WithHover2.default,\n          { setHover: setHover, message: 'click-to-logout' },\n          _react2.default.createElement(\n            'span',\n            { className: 'user__item', onClick: handleLogout },\n            t('logout')\n          )\n        ),\n        _react2.default.createElement(\n          _WithHover2.default,\n          { setHover: setHover, message: 'click-to-change-user-settings' },\n          _react2.default.createElement(\n            'span',\n            { className: 'user__item', onClick: handleChangePass },\n            t('user-settings')\n          )\n        )\n      )\n    )\n  );\n};\n\nexports.default = User;\n\n//# sourceURL=webpack:///./client/src/common/jsx/User.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _hocs = __webpack_require__(/*! ../hocs */ \"./client/src/admin/hocs/index.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Info = function Info(_ref) {\n  var info = _ref.info,\n      hover = _ref.hover;\n  return _react2.default.createElement(\n    'p',\n    { className: 'info' },\n    hover ? (0, _hocs.t)(hover) : (0, _hocs.t)(info)\n  );\n};\n\nexports.default = Info;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/Info.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/common/jsx/WithHover.jsx":
+/***/ "./client/src/admin/jsx/LangSwitch.jsx":
 /*!*********************************************!*\
-  !*** ./client/src/common/jsx/WithHover.jsx ***!
+  !*** ./client/src/admin/jsx/LangSwitch.jsx ***!
   \*********************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar WithHover = function WithHover(_ref) {\n  var children = _ref.children,\n      setHover = _ref.setHover,\n      message = _ref.message,\n      classes = _ref.classes;\n  return _react2.default.createElement(\n    'div',\n    {\n      onMouseEnter: function onMouseEnter() {\n        return setHover(message);\n      },\n      onMouseLeave: function onMouseLeave() {\n        return setHover(null);\n      },\n      className: classes\n    },\n    children\n  );\n};\n\nexports.default = WithHover;\n\n//# sourceURL=webpack:///./client/src/common/jsx/WithHover.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _hocs = __webpack_require__(/*! ../hocs */ \"./client/src/admin/hocs/index.js\");\n\nvar _translations = __webpack_require__(/*! ../data/translations.js */ \"./client/src/admin/data/translations.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar LangSwitch = function LangSwitch(_ref) {\n  var lang = _ref.lang,\n      setLang = _ref.setLang,\n      opened = _ref.opened,\n      setOpened = _ref.setOpened;\n\n  var handleSetLang = function handleSetLang(key) {\n    setLang(key);\n    setOpened(false);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'lang-switch' },\n    _react2.default.createElement(\n      _hocs.WithHover,\n      { message: 'click-to-change-language' },\n      _react2.default.createElement(\n        'span',\n        {\n          className: 'lang-switch__main-item' + (opened === 'lang' ? ' lang-switch__main-item--active' : ''),\n          onClick: function onClick() {\n            return setOpened(opened !== 'lang' ? 'lang' : false);\n          }\n        },\n        lang\n      ),\n      opened === 'lang' && _react2.default.createElement(\n        'div',\n        { className: 'lang-switch__list' },\n        _translations.languages.map(function (key) {\n          return key !== lang && _react2.default.createElement(\n            'span',\n            {\n              className: 'lang-switch__item',\n              key: key,\n              onClick: function onClick() {\n                return handleSetLang(key);\n              }\n            },\n            key\n          );\n        })\n      )\n    )\n  );\n};\n\nexports.default = LangSwitch;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/LangSwitch.jsx?");
+
+/***/ }),
+
+/***/ "./client/src/admin/jsx/TopBar.jsx":
+/*!*****************************************!*\
+  !*** ./client/src/admin/jsx/TopBar.jsx ***!
+  \*****************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _LangSwitch = __webpack_require__(/*! ./LangSwitch.jsx */ \"./client/src/admin/jsx/LangSwitch.jsx\");\n\nvar _LangSwitch2 = _interopRequireDefault(_LangSwitch);\n\nvar _User = __webpack_require__(/*! ./User.jsx */ \"./client/src/admin/jsx/User.jsx\");\n\nvar _User2 = _interopRequireDefault(_User);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar TopBar = function TopBar(_ref) {\n  var user = _ref.user,\n      setUser = _ref.setUser,\n      lang = _ref.lang,\n      setLang = _ref.setLang;\n\n  var _useState = (0, _react.useState)(false),\n      _useState2 = _slicedToArray(_useState, 2),\n      opened = _useState2[0],\n      setOpened = _useState2[1];\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'top-bar' },\n    opened !== false && _react2.default.createElement('div', {\n      className: 'top-bar__fog',\n      onClick: function onClick() {\n        return setOpened(false);\n      }\n    }),\n    _react2.default.createElement(_LangSwitch2.default, {\n      lang: lang,\n      setLang: setLang,\n      opened: opened,\n      setOpened: setOpened\n    }),\n    user && _react2.default.createElement(_User2.default, {\n      user: user,\n      setUser: setUser,\n      opened: opened,\n      setOpened: setOpened\n    })\n  );\n};\n\nexports.default = TopBar;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/TopBar.jsx?");
+
+/***/ }),
+
+/***/ "./client/src/admin/jsx/User.jsx":
+/*!***************************************!*\
+  !*** ./client/src/admin/jsx/User.jsx ***!
+  \***************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _hocs = __webpack_require__(/*! ../hocs */ \"./client/src/admin/hocs/index.js\");\n\nvar _logout = __webpack_require__(/*! ../api/logout */ \"./client/src/admin/api/logout.js\");\n\nvar _logout2 = _interopRequireDefault(_logout);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar User = function User(_ref) {\n  var user = _ref.user,\n      setUser = _ref.setUser,\n      opened = _ref.opened,\n      setOpened = _ref.setOpened;\n\n  var handleLogout = function handleLogout() {\n    setOpened(false);\n    (0, _logout2.default)();\n  };\n  var handleChangePass = function handleChangePass() {\n    setOpened(false);\n  };\n  var handleRemoveUser = function handleRemoveUser() {\n    setOpened(false);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'user' },\n    _react2.default.createElement(\n      _hocs.WithHover,\n      { message: 'click-to-change-user' },\n      _react2.default.createElement(\n        'span',\n        {\n          className: 'user__main-item' + (opened === 'user' ? ' user__main-item--active' : ''),\n          onClick: function onClick() {\n            return setOpened(opened !== 'user' ? 'user' : false);\n          }\n        },\n        user\n      ),\n      opened === 'user' && _react2.default.createElement(\n        'div',\n        { className: 'user__list' },\n        _react2.default.createElement(\n          _hocs.WithHover,\n          { message: 'click-to-logout' },\n          _react2.default.createElement(\n            'span',\n            { className: 'user__item', onClick: handleLogout },\n            (0, _hocs.t)('logout')\n          )\n        ),\n        _react2.default.createElement(\n          _hocs.WithHover,\n          { message: 'click-to-change-user-settings' },\n          _react2.default.createElement(\n            'span',\n            { className: 'user__item', onClick: handleChangePass },\n            (0, _hocs.t)('user-settings')\n          )\n        )\n      )\n    )\n  );\n};\n\nexports.default = User;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/User.jsx?");
+
+/***/ }),
+
+/***/ "./client/src/login/api/login.js":
+/*!***************************************!*\
+  !*** ./client/src/login/api/login.js ***!
+  \***************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = ((email, password) => (\n  fetch('/api/user/login', {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json;charset=utf-8'\n    },\n    body: JSON.stringify({ email, password }),\n  })\n    .then(() => window.location.href = \"/admin\")\n    .catch(() => {})\n));\n\n\n//# sourceURL=webpack:///./client/src/login/api/login.js?");
 
 /***/ }),
 
@@ -166,7 +226,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\n__webpack_require__(/*! ../scss/index.scss */ \"./client/src/login/scss/index.scss\");\n\nvar _texts = __webpack_require__(/*! ../../common/data/texts.js */ \"./client/src/common/data/texts.js\");\n\nvar _texts2 = _interopRequireDefault(_texts);\n\nvar _TopBar = __webpack_require__(/*! ../../common/jsx/TopBar.jsx */ \"./client/src/common/jsx/TopBar.jsx\");\n\nvar _TopBar2 = _interopRequireDefault(_TopBar);\n\nvar _Info = __webpack_require__(/*! ../../common/jsx/Info.jsx */ \"./client/src/common/jsx/Info.jsx\");\n\nvar _Info2 = _interopRequireDefault(_Info);\n\nvar _LoginPanel = __webpack_require__(/*! ./LoginPanel.jsx */ \"./client/src/login/jsx/LoginPanel.jsx\");\n\nvar _LoginPanel2 = _interopRequireDefault(_LoginPanel);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar App = function App() {\n  var _useState = (0, _react.useState)('en'),\n      _useState2 = _slicedToArray(_useState, 2),\n      lang = _useState2[0],\n      setLang = _useState2[1];\n\n  var _useState3 = (0, _react.useState)('login-info'),\n      _useState4 = _slicedToArray(_useState3, 2),\n      info = _useState4[0],\n      setInfo = _useState4[1];\n\n  var _useState5 = (0, _react.useState)(''),\n      _useState6 = _slicedToArray(_useState5, 2),\n      hover = _useState6[0],\n      setHover = _useState6[1];\n\n  var _useState7 = (0, _react.useState)(null),\n      _useState8 = _slicedToArray(_useState7, 2),\n      user = _useState8[0],\n      setUser = _useState8[1];\n\n  var t = function t(key) {\n    return _texts2.default[lang][key] || _texts2.default['en'][key];\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'main' },\n    _react2.default.createElement(_TopBar2.default, {\n      lang: lang,\n      setLang: setLang,\n      setHover: setHover,\n      t: t\n    }),\n    _react2.default.createElement(_LoginPanel2.default, {\n      setUser: setUser,\n      t: t\n    }),\n    _react2.default.createElement(_Info2.default, {\n      info: info,\n      hover: hover,\n      t: t\n    })\n  );\n};\n\n_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));\n\n//# sourceURL=webpack:///./client/src/login/jsx/App.jsx?");
+eval("\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\n__webpack_require__(/*! ../scss/index.scss */ \"./client/src/login/scss/index.scss\");\n\nvar _TopBar = __webpack_require__(/*! ../../admin/jsx/TopBar.jsx */ \"./client/src/admin/jsx/TopBar.jsx\");\n\nvar _TopBar2 = _interopRequireDefault(_TopBar);\n\nvar _Info = __webpack_require__(/*! ../../admin/jsx/Info.jsx */ \"./client/src/admin/jsx/Info.jsx\");\n\nvar _Info2 = _interopRequireDefault(_Info);\n\nvar _LoginPanel = __webpack_require__(/*! ./LoginPanel.jsx */ \"./client/src/login/jsx/LoginPanel.jsx\");\n\nvar _LoginPanel2 = _interopRequireDefault(_LoginPanel);\n\nvar _context = __webpack_require__(/*! ../../admin/context */ \"./client/src/admin/context/index.js\");\n\nvar _context2 = _interopRequireDefault(_context);\n\nvar _translations = __webpack_require__(/*! ../../admin/data/translations */ \"./client/src/admin/data/translations.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar App = function App() {\n  var _useState = (0, _react.useState)(_translations.defaultLanguage),\n      _useState2 = _slicedToArray(_useState, 2),\n      lang = _useState2[0],\n      setLang = _useState2[1];\n\n  var _useState3 = (0, _react.useState)('login-info'),\n      _useState4 = _slicedToArray(_useState3, 2),\n      info = _useState4[0],\n      setInfo = _useState4[1];\n\n  var _useState5 = (0, _react.useState)(''),\n      _useState6 = _slicedToArray(_useState5, 2),\n      hover = _useState6[0],\n      setHover = _useState6[1];\n\n  var _useState7 = (0, _react.useState)(null),\n      _useState8 = _slicedToArray(_useState7, 2),\n      user = _useState8[0],\n      setUser = _useState8[1];\n\n  return _react2.default.createElement(\n    _context2.default.Provider,\n    { value: { lang: lang, setHover: setHover, setInfo: setInfo } },\n    _react2.default.createElement(\n      'div',\n      { className: 'main' },\n      _react2.default.createElement(_TopBar2.default, {\n        lang: lang,\n        setLang: setLang\n      }),\n      _react2.default.createElement(_LoginPanel2.default, {\n        setUser: setUser\n      }),\n      _react2.default.createElement(_Info2.default, {\n        info: info,\n        hover: hover\n      })\n    )\n  );\n};\n\n_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));\n\n//# sourceURL=webpack:///./client/src/login/jsx/App.jsx?");
 
 /***/ }),
 
@@ -178,7 +238,7 @@ eval("\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { va
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar LoginPanel = function LoginPanel(_ref) {\n  var setUser = _ref.setUser,\n      t = _ref.t;\n\n  var _useState = (0, _react.useState)(''),\n      _useState2 = _slicedToArray(_useState, 2),\n      username = _useState2[0],\n      setUsername = _useState2[1];\n\n  var _useState3 = (0, _react.useState)(''),\n      _useState4 = _slicedToArray(_useState3, 2),\n      password = _useState4[0],\n      setPassword = _useState4[1];\n\n  var _useState5 = (0, _react.useState)(false),\n      _useState6 = _slicedToArray(_useState5, 2),\n      active = _useState6[0],\n      setActive = _useState6[1];\n\n  (0, _react.useEffect)(function () {\n    if (username.length > 4 && password.length > 4) {\n      setActive(true);\n    } else {\n      setActive(false);\n    }\n  }, [username, password]);\n\n  var usernameValidation = function usernameValidation(e) {\n    var value = e.target.value;\n    var regex = /^[0-9a-zA-Z]+$/;\n\n    if (value.length < 20 && value.match(regex) || value === \"\") {\n      setUsername(value);\n    }\n  };\n\n  var passwordValidation = function passwordValidation(e) {\n    e.target.value.length < 20 && setPassword(e.target.value);\n  };\n\n  var submit = function submit(e) {\n    e.preventDefault();\n    if (username === 'admin' && password === 'admin') {\n      setUser('admin');\n    }\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'login-panel' },\n    _react2.default.createElement(\n      'form',\n      { className: 'login-panel__form', onSubmit: submit },\n      _react2.default.createElement(\n        'p',\n        { className: 'login-panel__header' },\n        t('login-to-admin')\n      ),\n      _react2.default.createElement(\n        'div',\n        { className: 'text-input' },\n        _react2.default.createElement('input', {\n          onChange: usernameValidation,\n          placeholder: t('user'),\n          id: 'admin-user-name',\n          name: 'admin-user-name',\n          type: 'text',\n          className: 'text-input-field',\n          value: username\n        }),\n        _react2.default.createElement(\n          'label',\n          { htmlFor: 'admin-user-name', className: 'text-input-label' },\n          t('user')\n        )\n      ),\n      _react2.default.createElement(\n        'div',\n        { className: 'text-input' },\n        _react2.default.createElement('input', {\n          onChange: passwordValidation,\n          placeholder: t('password'),\n          id: 'admin-password',\n          name: 'admin-password',\n          type: 'password',\n          className: 'text-input-field',\n          value: password\n        }),\n        _react2.default.createElement(\n          'label',\n          { htmlFor: 'admin-password', className: 'text-input-label' },\n          t('password')\n        )\n      ),\n      _react2.default.createElement(\n        'div',\n        null,\n        _react2.default.createElement('input', {\n          type: 'submit',\n          className: 'login-panel__button' + (active ? ' active' : ''),\n          value: t('login')\n        })\n      )\n    )\n  );\n};\n\nexports.default = LoginPanel;\n\n//# sourceURL=webpack:///./client/src/login/jsx/LoginPanel.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _login = __webpack_require__(/*! ../api/login */ \"./client/src/login/api/login.js\");\n\nvar _login2 = _interopRequireDefault(_login);\n\nvar _hocs = __webpack_require__(/*! ../../admin/hocs */ \"./client/src/admin/hocs/index.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar LoginPanel = function LoginPanel(_ref) {\n  var setUser = _ref.setUser;\n\n  var _useState = (0, _react.useState)(''),\n      _useState2 = _slicedToArray(_useState, 2),\n      email = _useState2[0],\n      setEmail = _useState2[1];\n\n  var _useState3 = (0, _react.useState)(''),\n      _useState4 = _slicedToArray(_useState3, 2),\n      password = _useState4[0],\n      setPassword = _useState4[1];\n\n  var _useState5 = (0, _react.useState)(false),\n      _useState6 = _slicedToArray(_useState5, 2),\n      active = _useState6[0],\n      setActive = _useState6[1];\n\n  (0, _react.useEffect)(function () {\n    var emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n    emailRegex.test(email) && password.length > 5 ? setActive(true) : setActive(false);\n  }, [email, password]);\n\n  var submit = function submit(e) {\n    e.preventDefault();\n    (0, _login2.default)(email, password);\n  };\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'login-panel' },\n    _react2.default.createElement(\n      'form',\n      { className: 'login-panel__form', onSubmit: submit },\n      _react2.default.createElement(\n        'p',\n        { className: 'login-panel__header' },\n        (0, _hocs.t)('login-to-admin')\n      ),\n      _react2.default.createElement(\n        'div',\n        { className: 'text-input' },\n        _react2.default.createElement('input', {\n          onChange: function onChange(e) {\n            return setEmail(e.target.value);\n          },\n          placeholder: (0, _hocs.t)('user'),\n          id: 'admin-user-name',\n          name: 'admin-user-name',\n          type: 'text',\n          className: 'text-input-field',\n          value: email\n        }),\n        _react2.default.createElement(\n          'label',\n          { htmlFor: 'admin-user-name', className: 'text-input-label' },\n          (0, _hocs.t)('user')\n        )\n      ),\n      _react2.default.createElement(\n        'div',\n        { className: 'text-input' },\n        _react2.default.createElement('input', {\n          onChange: function onChange(e) {\n            return setPassword(e.target.value);\n          },\n          placeholder: (0, _hocs.t)('password'),\n          id: 'admin-password',\n          name: 'admin-password',\n          type: 'password',\n          className: 'text-input-field',\n          value: password\n        }),\n        _react2.default.createElement(\n          'label',\n          { htmlFor: 'admin-password', className: 'text-input-label' },\n          (0, _hocs.t)('password')\n        )\n      ),\n      _react2.default.createElement(\n        'div',\n        null,\n        _react2.default.createElement('input', {\n          type: 'submit',\n          className: 'login-panel__button' + (active ? ' active' : ''),\n          value: (0, _hocs.t)('login')\n        })\n      )\n    )\n  );\n};\n\nexports.default = LoginPanel;\n\n//# sourceURL=webpack:///./client/src/login/jsx/LoginPanel.jsx?");
 
 /***/ }),
 
@@ -200,7 +260,7 @@ eval("\nvar content = __webpack_require__(/*! !../../../../node_modules/css-load
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("exports = module.exports = __webpack_require__(/*! ../../../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"* {\\n  box-sizing: border-box; }\\n\\nhtml, body, div, span, applet, object, iframe,\\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\\na, abbr, acronym, address, big, cite, code,\\ndel, dfn, em, img, ins, kbd, q, s, samp,\\nsmall, strike, strong, sub, sup, tt, var,\\nb, u, i, center,\\ndl, dt, dd, ol, ul, li,\\nfieldset, form, label, legend,\\ntable, caption, tbody, tfoot, thead, tr, th, td,\\narticle, aside, canvas, details, embed,\\nfigure, figcaption, footer, header, hgroup,\\nmenu, nav, output, ruby, section, summary,\\ntime, mark, audio, video {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline; }\\n\\narticle, aside, details, figcaption, figure,\\nfooter, header, hgroup, menu, nav, section {\\n  display: block; }\\n\\nbody {\\n  line-height: 1; }\\n\\nol, ul {\\n  list-style: none; }\\n\\nblockquote, q {\\n  quotes: none; }\\n\\nblockquote:before, blockquote:after,\\nq:before, q:after {\\n  content: '';\\n  content: none; }\\n\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0; }\\n\\nhtml {\\n  min-width: 320px;\\n  background: white; }\\n\\nhtml {\\n  background: #181818; }\\n\\n* {\\n  -webkit-user-select: none;\\n  -khtml-user-select: none;\\n  -moz-user-select: -moz-none;\\n  -o-user-select: none;\\n  user-select: none; }\\n\\n.text-input {\\n  text-align: left;\\n  margin-bottom: 1.5em;\\n  transition: all .3s;\\n  cursor: text; }\\n  .text-input:focus-within {\\n    transform: scale(1.05, 1.05); }\\n\\n.text-input-label {\\n  font-size: 1.25em;\\n  width: 100%;\\n  color: #aaa;\\n  display: block;\\n  transform: translateY(-1.75em);\\n  transform-origin: 0 0;\\n  transition: all .3s;\\n  z-index: -1;\\n  cursor: text; }\\n\\n.text-input-field {\\n  font-size: 1.5rem;\\n  box-shadow: none;\\n  background: #181818;\\n  color: #fff;\\n  border-radius: 0;\\n  border-color: #ccc;\\n  border-style: none none solid none;\\n  width: 100%;\\n  transition: all .5s;\\n  padding: 5px; }\\n  .text-input-field::placeholder {\\n    color: transparent; }\\n  .text-input-field:focus {\\n    box-shadow: none;\\n    outline: none;\\n    border-color: orange; }\\n  .text-input-field:focus + .text-input-label,\\n  .text-input-field:not(:placeholder-shown) + .text-input-label {\\n    transform: translateY(-3em) scale(0.8); }\\n\\n.main {\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: space-between;\\n  position: fixed;\\n  top: 0;\\n  right: 0;\\n  bottom: 0;\\n  left: 0; }\\n  .main__content {\\n    flex-grow: 1;\\n    display: flex;\\n    flex-direction: column; }\\n\\n.info {\\n  display: block;\\n  color: #ddd;\\n  flex-grow: 0;\\n  text-align: center;\\n  padding-bottom: 3vh;\\n  padding-top: 3vh; }\\n\\n@keyframes showTopMenu {\\n  0% {\\n    transform: translateY(100%) scale(0.8);\\n    opacity: 0; }\\n  80% {\\n    transform: translateY(100%) scale(1.1);\\n    opacity: 100%; }\\n  100% {\\n    transform: translateY(100%) scale(1);\\n    opacity: 100%; } }\\n\\n.top-bar {\\n  flex-grow: 0;\\n  display: flex;\\n  justify-content: end;\\n  padding: 1em; }\\n  .top-bar__fog {\\n    position: fixed;\\n    top: 0;\\n    right: 0;\\n    bottom: 0;\\n    left: 0; }\\n\\n.user {\\n  position: relative; }\\n  .user__list {\\n    position: absolute;\\n    display: block;\\n    bottom: 0;\\n    right: 0;\\n    transform: translateY(100%);\\n    background: #222;\\n    animation: showTopMenu .3s; }\\n  .user__main-item {\\n    color: white;\\n    display: block;\\n    padding: .5em;\\n    white-space: nowrap;\\n    transition: color .3s;\\n    cursor: pointer; }\\n    .user__main-item--active {\\n      background: #222;\\n      color: yellow; }\\n    .user__main-item:hover {\\n      color: yellow; }\\n  .user__item {\\n    display: block;\\n    color: white;\\n    padding: .5em;\\n    font-weight: normal;\\n    transition: color .3s;\\n    cursor: pointer;\\n    white-space: nowrap;\\n    text-align: right; }\\n    .user__item:hover {\\n      color: yellow; }\\n\\n.lang-switch {\\n  display: inline-block;\\n  position: relative; }\\n  .lang-switch__list {\\n    position: absolute;\\n    bottom: 0;\\n    left: 0;\\n    right: 0;\\n    transform: translateY(100%);\\n    background: #222;\\n    animation: showTopMenu .3s; }\\n  .lang-switch__main-item {\\n    transition: .3s color;\\n    padding: .5em;\\n    display: block;\\n    color: white;\\n    font-weight: normal;\\n    cursor: pointer; }\\n    .lang-switch__main-item:hover {\\n      color: yellow; }\\n    .lang-switch__main-item--active {\\n      background: #222;\\n      color: yellow; }\\n  .lang-switch__item {\\n    padding: .5em;\\n    display: block;\\n    color: white;\\n    font-weight: normal;\\n    cursor: pointer;\\n    transition: color .3s; }\\n    .lang-switch__item:hover {\\n      color: yellow; }\\n\\n.login-panel {\\n  text-align: center; }\\n  .login-panel__form {\\n    display: inline-block; }\\n  .login-panel__header {\\n    color: white;\\n    font-size: 2em;\\n    margin-bottom: 4em; }\\n  .login-panel__button {\\n    display: inline-block;\\n    color: #aaa;\\n    background: #181818;\\n    font-size: 1.25em;\\n    border-radius: 1em;\\n    border: 2px solid #aaa;\\n    padding: .5em 1.5em;\\n    margin: 0 auto;\\n    transition: .3s color, .3s background;\\n    cursor: pointer; }\\n    .login-panel__button:hover {\\n      background: #aaa;\\n      color: #181818; }\\n    .login-panel__button.active {\\n      background: #181818;\\n      color: orange;\\n      border: 2px solid orange; }\\n      .login-panel__button.active:hover {\\n        background: orange;\\n        color: #181818; }\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./client/src/login/scss/index.scss?./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js");
+eval("exports = module.exports = __webpack_require__(/*! ../../../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"* {\\n  box-sizing: border-box; }\\n\\nhtml, body, div, span, applet, object, iframe,\\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\\na, abbr, acronym, address, big, cite, code,\\ndel, dfn, em, img, ins, kbd, q, s, samp,\\nsmall, strike, strong, sub, sup, tt, var,\\nb, u, i, center,\\ndl, dt, dd, ol, ul, li,\\nfieldset, form, label, legend,\\ntable, caption, tbody, tfoot, thead, tr, th, td,\\narticle, aside, canvas, details, embed,\\nfigure, figcaption, footer, header, hgroup,\\nmenu, nav, output, ruby, section, summary,\\ntime, mark, audio, video {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline; }\\n\\narticle, aside, details, figcaption, figure,\\nfooter, header, hgroup, menu, nav, section {\\n  display: block; }\\n\\nbody {\\n  line-height: 1; }\\n\\nol, ul {\\n  list-style: none; }\\n\\nblockquote, q {\\n  quotes: none; }\\n\\nblockquote:before, blockquote:after,\\nq:before, q:after {\\n  content: '';\\n  content: none; }\\n\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0; }\\n\\nhtml {\\n  min-width: 320px;\\n  background: white; }\\n\\nhtml {\\n  background: #181818; }\\n\\n* {\\n  -webkit-user-select: none;\\n  -khtml-user-select: none;\\n  -moz-user-select: -moz-none;\\n  -o-user-select: none;\\n  user-select: none; }\\n\\n.text-input {\\n  text-align: left;\\n  margin-bottom: 1.5em;\\n  transition: all .3s;\\n  cursor: text; }\\n  .text-input:focus-within {\\n    transform: scale(1.05, 1.05); }\\n\\n.text-input-label {\\n  font-size: 1.25em;\\n  width: 100%;\\n  color: #aaa;\\n  display: block;\\n  transform: translateY(-1.75em);\\n  transform-origin: 0 0;\\n  transition: all .3s;\\n  z-index: -1;\\n  cursor: text; }\\n\\n.text-input-field {\\n  font-size: 1.5rem;\\n  box-shadow: none;\\n  background: #181818;\\n  color: #fff;\\n  border-radius: 0;\\n  border-color: #ccc;\\n  border-style: none none solid none;\\n  width: 100%;\\n  transition: all .5s;\\n  padding: 5px; }\\n  .text-input-field::placeholder {\\n    color: transparent; }\\n  .text-input-field:focus {\\n    box-shadow: none;\\n    outline: none;\\n    border-color: orange; }\\n  .text-input-field:focus + .text-input-label,\\n  .text-input-field:not(:placeholder-shown) + .text-input-label {\\n    transform: translateY(-3em) scale(0.8); }\\n\\n.main {\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: space-between;\\n  position: fixed;\\n  top: 0;\\n  right: 0;\\n  bottom: 0;\\n  left: 0; }\\n  .main__content {\\n    flex-grow: 1;\\n    display: flex;\\n    flex-direction: column; }\\n\\n.info {\\n  display: block;\\n  color: #ddd;\\n  flex-grow: 0;\\n  text-align: center;\\n  padding-bottom: 3vh;\\n  padding-top: 3vh; }\\n\\n@keyframes showTopMenu {\\n  0% {\\n    transform: translateY(100%) scale(0.8);\\n    opacity: 0; }\\n  80% {\\n    transform: translateY(100%) scale(1.1);\\n    opacity: 100%; }\\n  100% {\\n    transform: translateY(100%) scale(1);\\n    opacity: 100%; } }\\n\\n.top-bar {\\n  flex-grow: 0;\\n  display: flex;\\n  justify-content: end;\\n  padding: 1em; }\\n  .top-bar__fog {\\n    position: fixed;\\n    top: 0;\\n    right: 0;\\n    bottom: 0;\\n    left: 0; }\\n\\n.user {\\n  position: relative; }\\n  .user__list {\\n    position: absolute;\\n    display: block;\\n    bottom: 0;\\n    right: 0;\\n    transform: translateY(100%);\\n    background: #222;\\n    animation: showTopMenu .3s; }\\n  .user__main-item {\\n    color: #fff;\\n    display: block;\\n    padding: .5em;\\n    white-space: nowrap;\\n    transition: color .3s;\\n    cursor: pointer; }\\n    .user__main-item--active {\\n      background: #222;\\n      color: orange; }\\n    .user__main-item:hover {\\n      color: orange; }\\n  .user__item {\\n    display: block;\\n    color: #fff;\\n    padding: .5em;\\n    font-weight: normal;\\n    transition: color .3s;\\n    cursor: pointer;\\n    white-space: nowrap;\\n    text-align: right; }\\n    .user__item:hover {\\n      color: orange; }\\n\\n.lang-switch {\\n  display: inline-block;\\n  position: relative; }\\n  .lang-switch__list {\\n    position: absolute;\\n    bottom: 0;\\n    left: 0;\\n    right: 0;\\n    transform: translateY(100%);\\n    background: #222;\\n    animation: showTopMenu .3s; }\\n  .lang-switch__main-item {\\n    transition: .3s color;\\n    padding: .5em;\\n    display: block;\\n    color: #fff;\\n    font-weight: normal;\\n    cursor: pointer; }\\n    .lang-switch__main-item:hover {\\n      color: orange; }\\n    .lang-switch__main-item--active {\\n      background: #222;\\n      color: orange; }\\n  .lang-switch__item {\\n    padding: .5em;\\n    display: block;\\n    color: #fff;\\n    font-weight: normal;\\n    cursor: pointer;\\n    transition: color .3s; }\\n    .lang-switch__item:hover {\\n      color: orange; }\\n\\n.login-panel {\\n  text-align: center; }\\n  .login-panel__form {\\n    display: inline-block; }\\n  .login-panel__header {\\n    color: white;\\n    font-size: 2em;\\n    margin-bottom: 4em; }\\n  .login-panel__button {\\n    display: inline-block;\\n    color: #aaa;\\n    background: #181818;\\n    font-size: 1.25em;\\n    border-radius: 1em;\\n    border: 2px solid #aaa;\\n    padding: .5em 1.5em;\\n    margin: 0 auto;\\n    transition: .3s color, .3s background;\\n    cursor: pointer; }\\n    .login-panel__button:hover {\\n      background: #aaa;\\n      color: #181818; }\\n    .login-panel__button.active {\\n      background: #181818;\\n      color: orange;\\n      border: 2px solid orange; }\\n      .login-panel__button.active:hover {\\n        background: orange;\\n        color: #181818; }\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./client/src/login/scss/index.scss?./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js");
 
 /***/ }),
 
diff --git a/client/src/admin/api/logout.js b/client/src/admin/api/logout.js
new file mode 100644
index 0000000..b0a9841
--- /dev/null
+++ b/client/src/admin/api/logout.js
@@ -0,0 +1,7 @@
+export default () => (
+  fetch('/api/user/logout', {
+    method: 'POST',
+  })
+  .then(() => window.location.href = "/")
+  .catch(() => {})
+);
diff --git a/client/src/admin/context/index.js b/client/src/admin/context/index.js
new file mode 100644
index 0000000..6353dc0
--- /dev/null
+++ b/client/src/admin/context/index.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext();
diff --git a/client/src/common/data/texts.js b/client/src/admin/data/translations.js
index 999460f..b4c34a2 100644
--- a/client/src/common/data/texts.js
+++ b/client/src/admin/data/translations.js
@@ -1,4 +1,6 @@
-export default {
+export const defaultLanguage = 'en';
+export const fallbackLanguage = 'en';
+export const translations = {
   "en": {
     "main-title": "Website Manager",
     "login-to-admin": "Login to Admin Panel",
@@ -28,9 +30,12 @@ export default {
   },
   "pl": {
     "main-title": "Website Manager",
+    "login-to-admin": "Zaloguj do Panelu Administracyjnego",
     "no-saved-websites": "Nie masz jeszcze żadnych zapisanych projektów, utwórz nowy",
     "create-new-project": "Utwórz nowy projekt",
     "edit-current-project": "Edytuj bieżący projekt",
     "show-saved-projects": "Pokaż zapisane projekty",
   },
-}
+};
+
+export const languages = Object.keys(translations);
diff --git a/client/src/admin/hocs/WithHover.jsx b/client/src/admin/hocs/WithHover.jsx
new file mode 100644
index 0000000..2a5cdcb
--- /dev/null
+++ b/client/src/admin/hocs/WithHover.jsx
@@ -0,0 +1,18 @@
+import React, {useContext} from 'react';
+import Context from '../context';
+
+
+const WithHover = ({ children, message, classes }) => {
+  const { setHover } = useContext(Context);
+  return (
+    <div
+      onMouseEnter={()=>setHover(message)}
+      onMouseLeave={()=>setHover(null)}
+      className={classes}
+    >
+      {children}
+    </div>
+  )
+};
+
+export default WithHover;
diff --git a/client/src/admin/hocs/WithTranslation.jsx b/client/src/admin/hocs/WithTranslation.jsx
new file mode 100644
index 0000000..b31b7c9
--- /dev/null
+++ b/client/src/admin/hocs/WithTranslation.jsx
@@ -0,0 +1,11 @@
+import React, {useContext} from 'react';
+import Context from '../context';
+import { translations, fallbackLanguage } from '../data/translations';
+
+const WithTranslation = (key) => {
+  const { lang } = useContext(Context);
+
+  return translations[lang][key] || translations[fallbackLanguage][key];
+};
+
+export default WithTranslation;
diff --git a/client/src/admin/hocs/index.js b/client/src/admin/hocs/index.js
new file mode 100644
index 0000000..df8c0c7
--- /dev/null
+++ b/client/src/admin/hocs/index.js
@@ -0,0 +1,4 @@
+import WithHover from './WithHover.jsx';
+import WithTranslation from './WithTranslation.jsx';
+
+export { WithHover, WithTranslation as t };
diff --git a/client/src/admin/jsx/App.jsx b/client/src/admin/jsx/App.jsx
index c5be77c..146af70 100644
--- a/client/src/admin/jsx/App.jsx
+++ b/client/src/admin/jsx/App.jsx
@@ -3,33 +3,35 @@ import ReactDOM from 'react-dom';
 
 import "../scss/index.scss";
 
-import texts from '../../common/data/texts.js';
-import TopBar from '../../common/jsx/TopBar.jsx';
-import Info from '../../common/jsx/Info.jsx';
+import TopBar from './TopBar.jsx';
+import Info from './Info.jsx';
 import MainScreen from './MainScreen.jsx';
+import Context from '../context';
+import { defaultLanguage } from '../data/translations';
 
 const App = () => {
-  const [adminLang, setAdminLang] = useState('en');
+  const [lang, setLang] = useState(defaultLanguage);
   const [projects, setProjects] = useState([]);
   const [info, setInfo] = useState('');
   const [hover, setHover] = useState('');
   const [view, setView] = useState('main');
   const [user, setUser] = useState(null);
-  const t = (key) => texts[adminLang][key] || texts['en'][key];
 
-  // useEffect(() => {
-  //   setInfo('no-saved-websites')
-  //   setHover('');
-  // }, [user]);
+  useEffect(() => {
+    setInfo('no-saved-websites');
+    setUser('admin@op.pl');
+  }, []);
 
   return (
-    <div className="main">
-      <TopBar lang={adminLang} setLang={setAdminLang} setHover={setHover} user={user} setUser={setUser} t={t} />
-      <div className="main__content">
-        { view === 'main' && <MainScreen projects={projects} t={t} setHover={setHover} /> }
+    <Context.Provider value={{ lang, setHover, setInfo }}>
+      <div className="main">
+        <TopBar lang={lang} setLang={setLang} user={user} setUser={setUser} />
+        <div className="main__content">
+          { view === 'main' && <MainScreen projects={projects} /> }
+        </div>
+        <Info info={info} hover={hover} />
       </div>
-      <Info info={info} hover={hover} t={t} />
-    </div>
+    </Context.Provider>
   )
 };
 
diff --git a/client/src/common/jsx/Info.jsx b/client/src/admin/jsx/Info.jsx
index 00d04b3..75294e1 100644
--- a/client/src/common/jsx/Info.jsx
+++ b/client/src/admin/jsx/Info.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import { t } from '../hocs';
 
-const Info = ({info, hover, t}) => (
+const Info = ({ info, hover }) => (
   <p className="info">
     { hover ? t(hover) : t(info) }
   </p>
diff --git a/client/src/common/jsx/LangSwitch.jsx b/client/src/admin/jsx/LangSwitch.jsx
index eba1b27..2494bef 100644
--- a/client/src/common/jsx/LangSwitch.jsx
+++ b/client/src/admin/jsx/LangSwitch.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import WithHover from './WithHover.jsx';
-import texts from '../data/texts.js';
-
-const LangSwitch = ({ lang, setLang, setHover, opened, setOpened}) => {
+import { WithHover } from '../hocs';
+import { languages } from '../data/translations.js'
 
+const LangSwitch = ({ lang, setLang, opened, setOpened}) => {
   const handleSetLang = (key) => {
     setLang(key);
     setOpened(false);
@@ -11,7 +10,7 @@ const LangSwitch = ({ lang, setLang, setHover, opened, setOpened}) => {
 
   return (
     <div className="lang-switch">
-      <WithHover setHover={setHover} message="click-to-change-language">
+      <WithHover message="click-to-change-language">
         <span
           className={`lang-switch__main-item${opened === 'lang' ? ' lang-switch__main-item--active' : ''}`}
           onClick={() => setOpened(opened !== 'lang' ? 'lang' : false)}
@@ -22,7 +21,7 @@ const LangSwitch = ({ lang, setLang, setHover, opened, setOpened}) => {
           opened === 'lang' && (
             <div className="lang-switch__list">
               {
-                Object.keys(texts).map(key => key !== lang && (
+                languages.map(key => key !== lang && (
                   <span
                     className="lang-switch__item"
                     key={key}
diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx
index ff28256..3d65384 100644
--- a/client/src/admin/jsx/MainScreen.jsx
+++ b/client/src/admin/jsx/MainScreen.jsx
@@ -1,21 +1,21 @@
 import React, { Fragment } from 'react';
-import WithHover from '../../common/jsx/WithHover.jsx';
+import { WithHover, t } from '../hocs';
 
-const MainScreen = ({ projects, t, setHover }) => (
+const MainScreen = ({ projects }) => (
   <div className="main-screen">
     <h1 className="main-screen__header">{ t('main-title') }</h1>
     <div className="main-screen__list">
       { !projects.length && (
-        <WithHover setHover={setHover} message="edit-current-project-hover">
+        <WithHover message="edit-current-project-hover">
           <p className="main-screen__item">{ t('edit-current-project') }</p>
         </WithHover>
       )}
       { !projects.length && (
-        <WithHover setHover={setHover} message="show-saved-projects-hover">
+        <WithHover message="show-saved-projects-hover">
           <p className="main-screen__item">{ t('show-saved-projects') }</p>
         </WithHover>
       )}
-      <WithHover setHover={setHover} message="create-new-project-hover">
+      <WithHover message="create-new-project-hover">
         <p className="main-screen__item">{ t('create-new-project') }</p>
       </WithHover>
     </div>
diff --git a/client/src/common/jsx/TopBar.jsx b/client/src/admin/jsx/TopBar.jsx
index 6e5ad6a..e9be676 100644
--- a/client/src/common/jsx/TopBar.jsx
+++ b/client/src/admin/jsx/TopBar.jsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import LangSwitch from './LangSwitch.jsx';
 import User from './User.jsx';
 
-const TopBar = ({user, setUser, setHover, lang, setLang, t={t}}) => {
+const TopBar = ({ user, setUser, lang, setLang }) => {
   const [opened, setOpened] = useState(false);
 
   return (
@@ -16,7 +16,6 @@ const TopBar = ({user, setUser, setHover, lang, setLang, t={t}}) => {
       <LangSwitch
         lang={lang}
         setLang={setLang}
-        setHover={setHover}
         opened={opened}
         setOpened={setOpened}
       />
@@ -24,8 +23,6 @@ const TopBar = ({user, setUser, setHover, lang, setLang, t={t}}) => {
           <User
             user={user}
             setUser={setUser}
-            setHover={setHover}
-            t={t}
             opened={opened}
             setOpened={setOpened}
           />
diff --git a/client/src/common/jsx/User.jsx b/client/src/admin/jsx/User.jsx
index 8b05d44..22b96b4 100644
--- a/client/src/common/jsx/User.jsx
+++ b/client/src/admin/jsx/User.jsx
@@ -1,17 +1,18 @@
 import React from 'react';
-import WithHover from './WithHover.jsx';
+import { WithHover, t } from '../hocs';
+import logout from '../api/logout';
 
-const User = ({user, setUser, setHover, t, opened, setOpened}) => {
+const User = ({ user, setUser, opened, setOpened }) => {
   const handleLogout = () => {
     setOpened(false);
-    setUser(null);
+    logout();
   };
   const handleChangePass = () => { setOpened(false) };
   const handleRemoveUser = () => { setOpened(false) };
 
   return (
     <div className="user">
-      <WithHover setHover={setHover} message="click-to-change-user">
+      <WithHover message="click-to-change-user">
         <span
           className={`user__main-item${opened === 'user' ? ' user__main-item--active' : ''}`}
           onClick={() => setOpened(opened !== 'user' ? 'user' : false)}
@@ -21,10 +22,10 @@ const User = ({user, setUser, setHover, t, opened, setOpened}) => {
         {
           opened === 'user' && (
             <div className="user__list" >
-              <WithHover setHover={setHover} message="click-to-logout">
+              <WithHover message="click-to-logout">
                 <span className="user__item" onClick={handleLogout}>{t('logout')}</span>
               </WithHover>
-              <WithHover setHover={setHover} message="click-to-change-user-settings">
+              <WithHover message="click-to-change-user-settings">
                 <span className="user__item" onClick={handleChangePass}>{t('user-settings')}</span>
               </WithHover>
             </div>
diff --git a/client/src/common/scss/_colors.scss b/client/src/admin/scss/_colors.scss
index 2dd49a0..45ae737 100644
--- a/client/src/common/scss/_colors.scss
+++ b/client/src/admin/scss/_colors.scss
@@ -1,5 +1,5 @@
 $background: #181818;
-$text: #eee;
-$text-highlighted: #fff;
+$background-menu: #222;
+$text: #fff;
 $text-selected: orange;
 $text-inactive: #aaa;
diff --git a/client/src/common/scss/_forms.scss b/client/src/admin/scss/_forms.scss
index b7ac0f4..0585cd6 100644
--- a/client/src/common/scss/_forms.scss
+++ b/client/src/admin/scss/_forms.scss
@@ -27,7 +27,7 @@
   font-size: 1.5rem;
   box-shadow: none;
   background: $background;
-  color: $text-highlighted;
+  color: $text;
   border-radius: 0;
   border-color: #ccc;
   border-style: none none solid none;
diff --git a/client/src/common/scss/_globals.scss b/client/src/admin/scss/_globals.scss
index f03ad86..f03ad86 100644
--- a/client/src/common/scss/_globals.scss
+++ b/client/src/admin/scss/_globals.scss
diff --git a/client/src/common/scss/_info.scss b/client/src/admin/scss/_info.scss
index ac32949..ac32949 100644
--- a/client/src/common/scss/_info.scss
+++ b/client/src/admin/scss/_info.scss
diff --git a/client/src/common/scss/_main.scss b/client/src/admin/scss/_main.scss
index e182f3c..e182f3c 100644
--- a/client/src/common/scss/_main.scss
+++ b/client/src/admin/scss/_main.scss
diff --git a/client/src/common/scss/_reset.scss b/client/src/admin/scss/_reset.scss
index 2928cc4..2928cc4 100755
--- a/client/src/common/scss/_reset.scss
+++ b/client/src/admin/scss/_reset.scss
diff --git a/client/src/common/scss/_topBar.scss b/client/src/admin/scss/_topBar.scss
index fb0e6a5..af9fcd6 100644
--- a/client/src/common/scss/_topBar.scss
+++ b/client/src/admin/scss/_topBar.scss
@@ -29,12 +29,12 @@
     bottom: 0;
     right: 0;
     transform: translateY(100%);
-    background: #222;
+    background: $background-menu;
     animation: showTopMenu .3s;
   }
 
   &__main-item {
-    color: white;
+    color: $text;
     display: block;
     padding: .5em;
     white-space: nowrap;
@@ -42,18 +42,18 @@
     cursor: pointer;
 
     &--active {
-      background: #222;
-      color: yellow;
+      background: $background-menu;
+      color: $text-selected;
     }
 
     &:hover {
-      color: yellow;
+      color: $text-selected;
     }
   }
 
   &__item {
     display: block;
-    color: white;
+    color: $text;
     padding: .5em;
     font-weight: normal;
     transition: color .3s;
@@ -62,7 +62,7 @@
     text-align: right;
 
     &:hover {
-      color: yellow;
+      color: $text-selected;
     }
   }
 }
@@ -77,7 +77,7 @@
     left: 0;
     right: 0;
     transform: translateY(100%);
-    background: #222;
+    background: $background-menu;
     animation: showTopMenu .3s;
   }
 
@@ -85,30 +85,30 @@
     transition: .3s color;
     padding: .5em;
     display: block;
-    color: white;
+    color: $text;
     font-weight: normal;
     cursor: pointer;
 
     &:hover {
-      color: yellow;
+      color: $text-selected;
     }
 
     &--active {
-      background: #222;
-      color: yellow;
+      background: $background-menu;
+      color: $text-selected;
     }
   }
 
   &__item {
     padding: .5em;
     display: block;
-    color: white;
+    color: $text;
     font-weight: normal;
     cursor: pointer;
     transition: color .3s;
 
     &:hover {
-      color: yellow;
+      color: $text-selected;
     }
   }
 }
diff --git a/client/src/admin/scss/index.scss b/client/src/admin/scss/index.scss
index 67553bb..ab61dd9 100644
--- a/client/src/admin/scss/index.scss
+++ b/client/src/admin/scss/index.scss
@@ -1,8 +1,8 @@
-@import '../../common/scss/reset';
-@import '../../common/scss/colors';
-@import '../../common/scss/globals';
-@import '../../common/scss/forms';
-@import '../../common/scss/main';
-@import '../../common/scss/info';
-@import '../../common/scss/topBar';
+@import 'reset';
+@import 'colors';
+@import 'globals';
+@import 'forms';
+@import 'main';
+@import 'info';
+@import 'topBar';
 @import 'mainScreen';
diff --git a/client/src/common/jsx/WithHover.jsx b/client/src/common/jsx/WithHover.jsx
deleted file mode 100644
index bb1a7f4..0000000
--- a/client/src/common/jsx/WithHover.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-const WithHover = ({ children, setHover, message, classes }) => (
-  <div
-    onMouseEnter={()=>setHover(message)}
-    onMouseLeave={()=>setHover(null)}
-    className={classes}
-  >
-    {children}
-  </div>
-);
-
-export default WithHover;
diff --git a/client/src/login/api/login.js b/client/src/login/api/login.js
new file mode 100644
index 0000000..4ed36a7
--- /dev/null
+++ b/client/src/login/api/login.js
@@ -0,0 +1,11 @@
+export default (email, password) => (
+  fetch('/api/user/login', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json;charset=utf-8'
+    },
+    body: JSON.stringify({ email, password }),
+  })
+    .then(() => window.location.href = "/admin")
+    .catch(() => {})
+);
diff --git a/client/src/login/data/texts.js b/client/src/login/data/texts.js
deleted file mode 100644
index e69de29..0000000
--- a/client/src/login/data/texts.js
+++ /dev/null
diff --git a/client/src/login/jsx/App.jsx b/client/src/login/jsx/App.jsx
index a0109dd..e33e6c2 100644
--- a/client/src/login/jsx/App.jsx
+++ b/client/src/login/jsx/App.jsx
@@ -3,36 +3,34 @@ import ReactDOM from 'react-dom';
 
 import "../scss/index.scss";
 
-import texts from '../../common/data/texts.js';
-import TopBar from '../../common/jsx/TopBar.jsx';
-import Info from '../../common/jsx/Info.jsx';
+import TopBar from '../../admin/jsx/TopBar.jsx';
+import Info from '../../admin/jsx/Info.jsx';
 import LoginPanel from './LoginPanel.jsx';
+import Context from '../../admin/context';
+import { defaultLanguage } from '../../admin/data/translations';
 
 const App = () => {
-  const [lang, setLang] = useState('en');
+  const [lang, setLang] = useState(defaultLanguage);
   const [info, setInfo] = useState('login-info');
   const [hover, setHover] = useState('');
   const [user, setUser] = useState(null);
-  const t = (key) => texts[lang][key] || texts['en'][key];
 
   return (
-    <div className="main">
-      <TopBar
-        lang={lang}
-        setLang={setLang}
-        setHover={setHover}
-        t={t}
-      />
-      <LoginPanel
-        setUser={setUser}
-        t={t}
-      />
-      <Info
-        info={info}
-        hover={hover}
-        t={t}
-      />
-    </div>
+    <Context.Provider value={{ lang, setHover, setInfo }}>
+      <div className="main">
+        <TopBar
+          lang={lang}
+          setLang={setLang}
+        />
+        <LoginPanel
+          setUser={setUser}
+        />
+        <Info
+          info={info}
+          hover={hover}
+        />
+      </div>
+    </Context.Provider>
   )
 };
 
diff --git a/client/src/login/jsx/LoginPanel.jsx b/client/src/login/jsx/LoginPanel.jsx
index 296dc0e..e90a5c4 100644
--- a/client/src/login/jsx/LoginPanel.jsx
+++ b/client/src/login/jsx/LoginPanel.jsx
@@ -1,36 +1,22 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useContext} from 'react';
+import login from '../api/login';
+import { t } from '../../admin/hocs';
 
-const LoginPanel = ({setUser, t}) => {
-  const [username, setUsername] = useState('');
+const LoginPanel = ({setUser}) => {
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [active, setActive] = useState(false);
 
   useEffect(() => {
-    if (username.length > 4 && password.length > 4) {
-      setActive(true);
-    } else {
-      setActive(false);
-    }
-  }, [username, password])
-
-  const usernameValidation = (e) => {
-    const value = e.target.value;
-    const regex = /^[0-9a-zA-Z]+$/;
-
-    if ((value.length < 20 && value.match(regex)) || value === "") {
-      setUsername(value);
-    }
-  };
-
-  const passwordValidation = (e) => {
-    e.target.value.length < 20 && setPassword(e.target.value);
-  };
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    emailRegex.test(email) && password.length > 5
+      ? setActive(true)
+      : setActive(false);
+  }, [email, password])
 
   const submit = (e) => {
     e.preventDefault();
-    if (username === 'admin' && password === 'admin') {
-      setUser('admin');
-    }
+    login(email, password);
   }
 
   return (
@@ -41,19 +27,19 @@ const LoginPanel = ({setUser, t}) => {
         </p>
         <div className="text-input">
           <input
-            onChange={usernameValidation}
+            onChange={e => setEmail(e.target.value)}
             placeholder={t('user')}
             id="admin-user-name"
             name="admin-user-name"
             type="text"
             className="text-input-field"
-            value={username}
+            value={email}
           />
           <label htmlFor="admin-user-name" className="text-input-label">{t('user')}</label>
         </div>
         <div className="text-input">
           <input
-            onChange={passwordValidation}
+            onChange={e => setPassword(e.target.value)}
             placeholder={t('password')}
             id="admin-password"
             name="admin-password"
diff --git a/client/src/login/scss/index.scss b/client/src/login/scss/index.scss
index 6a7eb52..d904eb1 100644
--- a/client/src/login/scss/index.scss
+++ b/client/src/login/scss/index.scss
@@ -1,8 +1,8 @@
-@import '../../common/scss/reset';
-@import '../../common/scss/colors';
-@import '../../common/scss/globals';
-@import '../../common/scss/forms';
-@import '../../common/scss/main';
-@import '../../common/scss/info';
-@import '../../common/scss/topBar';
+@import '../../admin/scss/reset';
+@import '../../admin/scss/colors';
+@import '../../admin/scss/globals';
+@import '../../admin/scss/forms';
+@import '../../admin/scss/main';
+@import '../../admin/scss/info';
+@import '../../admin/scss/topBar';
 @import 'loginPanel';