first creator page

20 files changed, 352 insertions, 80 deletions

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..29bd0d5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,9 @@
+# website-creator (work in progress)
+Node+React+MongoDB App to help create and maintain websites
+
+What's already done:
+- Authentication uses JWT token + refresh token
+- User can have independent sessions opened on different browsers & devices
+- Routes: "/" - generated website, "/login" - login app, "/admin" - admin tool
+- Admin route blocked including statics
+- Cleaning unclosed sessions in DB (after defined time from last authentication)
diff --git a/client/admin/out.js b/client/admin/out.js
index 12bed43..74544fb 100644
--- a/client/admin/out.js
+++ b/client/admin/out.js
@@ -154,7 +154,19 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
 /***/ (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 email and password, then click login button\",\n    \"login\": \"Login\",\n    \"email\": \"Email\",\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 settings\",\n    \"logout\": \"Logout\",\n    \"click-to-logout\": \"Click to logout 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?");
+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 email and password, then click login button\",\n    \"login\": \"Login\",\n    \"email\": \"Email\",\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 settings\",\n    \"logout\": \"Logout\",\n    \"click-to-logout\": \"Click to logout 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    \"main-information\": \"Main information\",\n    \"website-title\": \"Website title\",\n    \"website-title-hover\": \"Website title should have less than 55 characters, it will be displayed on the browser tab and will help search engines find your page\",\n    \"website-description\": \"Website description\",\n    \"website-description-hover\": \"Website description should have around 150 characters, it will be displayed on search results under website title\",\n    \"upload-favicon\": \"Website's favicon\",\n    \"upload-favicon-hover\": \"Click to add favicon for your website (32x32px)\",\n    \"next\": \"Next\",\n    \"creator-next-hover\": \"Click to navigate to next screen\",\n    \"cancel\": \"Cancel\",\n    \"creator-cancel-hover\": \"Click to exit creator without saving changes\",\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/View.jsx":
+/*!****************************************!*\
+  !*** ./client/src/admin/hocs/View.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 _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 View = function View(view) {\n  var _useContext = (0, _react.useContext)(_context2.default),\n      setView = _useContext.setView;\n\n  return function () {\n    return setView(view);\n  };\n};\n\nexports.default = View;\n\n//# sourceURL=webpack:///./client/src/admin/hocs/View.jsx?");
 
 /***/ }),
 
@@ -186,11 +198,11 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /*!****************************************!*\
   !*** ./client/src/admin/hocs/index.js ***!
   \****************************************/
-/*! exports provided: WithHover, t */
+/*! exports provided: WithHover, t, goTo */
 /***/ (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?");
+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/* harmony import */ var _View_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./View.jsx */ \"./client/src/admin/hocs/View.jsx\");\n/* harmony import */ var _View_jsx__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_View_jsx__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, \"goTo\", function() { return _View_jsx__WEBPACK_IMPORTED_MODULE_2___default.a; });\n\n\n\n\n\n\n\n//# sourceURL=webpack:///./client/src/admin/hocs/index.js?");
 
 /***/ }),
 
@@ -202,67 +214,91 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Wit
 /***/ (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/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\nvar _api = __webpack_require__(/*! ../api */ \"./client/src/admin/api/index.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  var setLangWithDb = function setLangWithDb(key) {\n    setLang(key);\n    (0, _api.setDbLang)(key);\n  };\n\n  (0, _react.useEffect)(function () {\n    (0, _api.getUser)(setUser);\n    setInfo('no-saved-websites');\n  }, []);\n\n  (0, _react.useEffect)(function () {\n    user && setLang(user.language);\n  }, [user]);\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: setLangWithDb, 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?");
+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__(/*! ./layout/TopBar.jsx */ \"./client/src/admin/jsx/layout/TopBar.jsx\");\n\nvar _TopBar2 = _interopRequireDefault(_TopBar);\n\nvar _Info = __webpack_require__(/*! ./layout/Info.jsx */ \"./client/src/admin/jsx/layout/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 _Creator = __webpack_require__(/*! ./creator/Creator.jsx */ \"./client/src/admin/jsx/creator/Creator.jsx\");\n\nvar _Creator2 = _interopRequireDefault(_Creator);\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\nvar _api = __webpack_require__(/*! ../api */ \"./client/src/admin/api/index.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  var setLangWithDb = function setLangWithDb(key) {\n    setLang(key);\n    (0, _api.setDbLang)(key);\n  };\n\n  (0, _react.useEffect)(function () {\n    (0, _api.getUser)(setUser);\n    setInfo('no-saved-websites');\n  }, []);\n\n  (0, _react.useEffect)(function () {\n    user && setLang(user.language);\n  }, [user]);\n\n  return _react2.default.createElement(\n    _context2.default.Provider,\n    { value: { lang: lang, setHover: setHover, setInfo: setInfo, setView: setView } },\n    _react2.default.createElement(\n      'div',\n      { className: 'main' },\n      _react2.default.createElement(_TopBar2.default, { lang: lang, setLang: setLangWithDb, 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        view === 'creator' && _react2.default.createElement(_Creator2.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/admin/jsx/Info.jsx":
-/*!***************************************!*\
-  !*** ./client/src/admin/jsx/Info.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 _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?");
+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', onClick: (0, _hocs.goTo)('creator') },\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/admin/jsx/LangSwitch.jsx":
-/*!*********************************************!*\
-  !*** ./client/src/admin/jsx/LangSwitch.jsx ***!
-  \*********************************************/
+/***/ "./client/src/admin/jsx/creator/Creator.jsx":
+/*!**************************************************!*\
+  !*** ./client/src/admin/jsx/creator/Creator.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 _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?");
+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 _Step = __webpack_require__(/*! ./Step1 */ \"./client/src/admin/jsx/creator/Step1.jsx\");\n\nvar _Step2 = _interopRequireDefault(_Step);\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 Creator = function Creator(_ref) {\n  var projects = _ref.projects;\n\n  var _useState = (0, _react.useState)('step1'),\n      _useState2 = _slicedToArray(_useState, 2),\n      step = _useState2[0],\n      setStep = _useState2[1];\n\n  switch (step) {\n    case 'step1':\n      return _react2.default.createElement(_Step2.default, { setStep: setStep });\n    case 'step2':\n      return null;\n    default:\n      return null;\n  }\n};\n\nexports.default = Creator;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/creator/Creator.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/admin/jsx/MainScreen.jsx":
-/*!*********************************************!*\
-  !*** ./client/src/admin/jsx/MainScreen.jsx ***!
-  \*********************************************/
+/***/ "./client/src/admin/jsx/creator/Step1.jsx":
+/*!************************************************!*\
+  !*** ./client/src/admin/jsx/creator/Step1.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\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?");
+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 _hocs = __webpack_require__(/*! ../../hocs */ \"./client/src/admin/hocs/index.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Step1 = function Step1() {\n  var _useState = (0, _react.useState)(''),\n      _useState2 = _slicedToArray(_useState, 2),\n      websiteTitle = _useState2[0],\n      setWebsiteTitle = _useState2[1];\n\n  var _useState3 = (0, _react.useState)(''),\n      _useState4 = _slicedToArray(_useState3, 2),\n      websiteDescription = _useState4[0],\n      setWebsiteDescription = _useState4[1];\n\n  var isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : '';\n\n  return _react2.default.createElement(\n    'div',\n    { className: 'creator' },\n    _react2.default.createElement(\n      'div',\n      { className: 'creator__header' },\n      (0, _hocs.t)('main-information')\n    ),\n    _react2.default.createElement(\n      'div',\n      { className: 'creator__input-line' },\n      _react2.default.createElement(\n        _hocs.WithHover,\n        { message: 'website-title-hover' },\n        _react2.default.createElement(\n          'div',\n          { className: 'text-input' },\n          _react2.default.createElement('input', {\n            onChange: function onChange(e) {\n              return setWebsiteTitle(e.target.value);\n            },\n            placeholder: (0, _hocs.t)('website-title'),\n            id: 'website-title',\n            name: 'website-title',\n            type: 'text',\n            className: 'text-input-field',\n            value: websiteTitle\n          }),\n          _react2.default.createElement(\n            'label',\n            { htmlFor: 'website-title', className: 'text-input-label' },\n            (0, _hocs.t)('website-title') + ' (' + websiteTitle.length + ')'\n          )\n        )\n      )\n    ),\n    _react2.default.createElement(\n      'div',\n      { className: 'creator__input-line' },\n      _react2.default.createElement(\n        _hocs.WithHover,\n        { message: 'website-description-hover' },\n        _react2.default.createElement(\n          'div',\n          { className: 'text-area' },\n          _react2.default.createElement('textarea', {\n            onChange: function onChange(e) {\n              return setWebsiteDescription(e.target.value);\n            },\n            id: 'website-description',\n            name: 'website-description',\n            placeholder: (0, _hocs.t)('website-description') }),\n          _react2.default.createElement(\n            'label',\n            { htmlFor: 'website-description', className: 'text-area-label' },\n            (0, _hocs.t)('website-description') + ' (' + websiteDescription.length + ')'\n          )\n        )\n      )\n    ),\n    _react2.default.createElement(\n      'div',\n      { className: 'creator__input-line' },\n      _react2.default.createElement(\n        'div',\n        { className: 'creator__favicon' },\n        _react2.default.createElement(\n          _hocs.WithHover,\n          { message: 'upload-favicon-hover' },\n          _react2.default.createElement(\n            'div',\n            { className: 'creator__favicon-ico' },\n            '+'\n          )\n        ),\n        _react2.default.createElement(\n          'span',\n          { className: 'creator__favicon-text' },\n          (0, _hocs.t)('upload-favicon')\n        )\n      )\n    ),\n    _react2.default.createElement(\n      'div',\n      { className: 'creator__btns' },\n      _react2.default.createElement(\n        _hocs.WithHover,\n        { message: 'creator-cancel-hover' },\n        _react2.default.createElement(\n          'div',\n          { onClick: (0, _hocs.goTo)('main'), className: 'creator__btns-cancel' },\n          (0, _hocs.t)('cancel')\n        )\n      ),\n      _react2.default.createElement(\n        _hocs.WithHover,\n        { message: 'creator-next-hover' },\n        _react2.default.createElement(\n          'div',\n          { className: 'creator__btns-next ' + isNextActive },\n          (0, _hocs.t)('next')\n        )\n      )\n    )\n  );\n};\n\nexports.default = Step1;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/creator/Step1.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/admin/jsx/TopBar.jsx":
-/*!*****************************************!*\
-  !*** ./client/src/admin/jsx/TopBar.jsx ***!
-  \*****************************************/
+/***/ "./client/src/admin/jsx/layout/Info.jsx":
+/*!**********************************************!*\
+  !*** ./client/src/admin/jsx/layout/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 _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?");
+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/layout/Info.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/admin/jsx/User.jsx":
-/*!***************************************!*\
-  !*** ./client/src/admin/jsx/User.jsx ***!
-  \***************************************/
+/***/ "./client/src/admin/jsx/layout/LangSwitch.jsx":
+/*!****************************************************!*\
+  !*** ./client/src/admin/jsx/layout/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\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/layout/LangSwitch.jsx?");
+
+/***/ }),
+
+/***/ "./client/src/admin/jsx/layout/TopBar.jsx":
+/*!************************************************!*\
+  !*** ./client/src/admin/jsx/layout/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/layout/LangSwitch.jsx\");\n\nvar _LangSwitch2 = _interopRequireDefault(_LangSwitch);\n\nvar _UserSwitch = __webpack_require__(/*! ./UserSwitch.jsx */ \"./client/src/admin/jsx/layout/UserSwitch.jsx\");\n\nvar _UserSwitch2 = _interopRequireDefault(_UserSwitch);\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(_UserSwitch2.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/layout/TopBar.jsx?");
+
+/***/ }),
+
+/***/ "./client/src/admin/jsx/layout/UserSwitch.jsx":
+/*!****************************************************!*\
+  !*** ./client/src/admin/jsx/layout/UserSwitch.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 _api = __webpack_require__(/*! ../api */ \"./client/src/admin/api/index.js\");\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, _api.logout)();\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.email\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?");
+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 _api = __webpack_require__(/*! ../../api */ \"./client/src/admin/api/index.js\");\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, _api.logout)();\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.email\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/layout/UserSwitch.jsx?");
 
 /***/ }),
 
@@ -284,7 +320,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\\np {\\n  line-height: 1.5; }\\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: 1em;\\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  pointer-events: none; }\\n\\n.text-input-field {\\n  font-size: 1.25rem;\\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  padding: 1em 1.5em 1.5em 1.5em;\\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-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  width: 100%;\\n  text-align: right;\\n  white-space: nowrap;\\n  padding-bottom: 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  display: inline-block; }\\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\\n@keyframes shine {\\n  0% {\\n    background-size: 220% 100%; }\\n  10% {\\n    background-position: 0 100%; }\\n  100% {\\n    background-position: 0 100%; } }\\n  .main-screen__header {\\n    display: block;\\n    margin-top: 10vh;\\n    margin-bottom: 20vh;\\n    font-size: 2.5em;\\n    font-weight: bold;\\n    color: #fff;\\n    text-align: center;\\n    position: relative;\\n    overflow: hidden;\\n    background: linear-gradient(to right, #fff 50%, orange 55%, #fff 60%);\\n    background-clip: text;\\n    -webkit-background-clip: text;\\n    -webkit-text-fill-color: transparent;\\n    background-position: 110%;\\n    animation: shine 15s ease-out;\\n    background-size: 220% 100%;\\n    animation-iteration-count: infinite;\\n    animation-delay: 8s; }\\n  .main-screen__list {\\n    display: inline-block; }\\n  .main-screen__item {\\n    font-size: 1.5em;\\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  user-select: none; }\\n\\np {\\n  line-height: 1.5; }\\n\\n.text-input,\\n.text-area {\\n  text-align: left;\\n  margin-bottom: 1.5em;\\n  transition: all .3s;\\n  cursor: text; }\\n  .text-input:focus-within,\\n  .text-area:focus-within {\\n    transform: scale(1.05, 1.05); }\\n\\n.text-input-label,\\n.text-area-label {\\n  font-size: 1em;\\n  width: 100%;\\n  color: #aaa;\\n  display: block;\\n  transform-origin: 0 0;\\n  transition: all .3s;\\n  z-index: -1;\\n  cursor: text;\\n  pointer-events: none; }\\n\\n.text-input-label {\\n  transform: translateY(-1.75em); }\\n\\n.text-area-label {\\n  transform: translateY(-2em); }\\n\\n.text-input-field,\\n.text-area textarea {\\n  font-size: 1.25em;\\n  box-shadow: none;\\n  background: #181818;\\n  color: orange;\\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  -webkit-user-select: auto;\\n  user-select: auto; }\\n  .text-input-field::placeholder,\\n  .text-area textarea::placeholder {\\n    color: transparent; }\\n  .text-input-field:focus,\\n  .text-area textarea:focus {\\n    box-shadow: none;\\n    outline: none;\\n    border-color: orange; }\\n\\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.text-area textarea {\\n  height: 6em;\\n  resize: none;\\n  overflow: hidden; }\\n  .text-area textarea:focus + .text-area-label,\\n  .text-area textarea:not(:placeholder-shown) + .text-area-label {\\n    transform: translateY(-6.5em) scale(0.8); }\\n\\n.main {\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: space-between;\\n  position: fixed;\\n  padding: 1em 1.5em 1.5em 1.5em;\\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-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  width: 100%;\\n  text-align: right;\\n  white-space: nowrap;\\n  padding-bottom: 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  display: inline-block; }\\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\\n@keyframes shine {\\n  0% {\\n    background-size: 220% 100%; }\\n  10% {\\n    background-position: 0 100%; }\\n  100% {\\n    background-position: 0 100%; } }\\n  .main-screen__header {\\n    display: block;\\n    margin-top: 10vh;\\n    margin-bottom: 20vh;\\n    font-size: 2.5em;\\n    font-weight: bold;\\n    color: #fff;\\n    text-align: center;\\n    position: relative;\\n    overflow: hidden;\\n    background: linear-gradient(to right, #fff 50%, orange 55%, #fff 60%);\\n    background-clip: text;\\n    -webkit-background-clip: text;\\n    -webkit-text-fill-color: transparent;\\n    background-position: 110%;\\n    animation: shine 15s ease-out;\\n    background-size: 220% 100%;\\n    animation-iteration-count: infinite;\\n    animation-delay: 8s; }\\n  .main-screen__list {\\n    display: inline-block; }\\n  .main-screen__item {\\n    font-size: 1.5em;\\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.creator {\\n  text-align: center;\\n  width: 100%; }\\n  .creator__header {\\n    color: #fff;\\n    text-align: center;\\n    font-size: 1.5em;\\n    padding-bottom: 1.5em; }\\n  .creator__input-line {\\n    max-width: 600px;\\n    margin: 0 auto;\\n    align-items: center;\\n    padding: 1em 0; }\\n  .creator__favicon {\\n    display: flex; }\\n    .creator__favicon-ico {\\n      height: 32px;\\n      width: 32px;\\n      line-height: 32px;\\n      background: #aaa;\\n      color: #222;\\n      border: 1px solid #222;\\n      transition: .3s background;\\n      cursor: pointer; }\\n      .creator__favicon-ico:hover {\\n        background: orange; }\\n    .creator__favicon-text {\\n      color: #aaa;\\n      font-size: 1em;\\n      line-height: 32px;\\n      padding-left: 1em; }\\n  .creator__btns {\\n    padding-top: 3em;\\n    font-size: 1.5em;\\n    margin: 0 auto;\\n    text-align: center;\\n    display: flex;\\n    justify-content: center; }\\n    .creator__btns-next {\\n      color: #aaa;\\n      display: inline-block;\\n      padding: 1em; }\\n      .creator__btns-next.active {\\n        color: #fff;\\n        transition: .3s color;\\n        cursor: pointer; }\\n        .creator__btns-next.active:hover {\\n          color: orange; }\\n    .creator__btns-cancel {\\n      display: inline-block;\\n      color: #fff;\\n      transition: .3s color;\\n      cursor: pointer;\\n      padding: 1em; }\\n      .creator__btns-cancel: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/index.html b/client/login/index.html
index 660686e..06461e1 100644
--- a/client/login/index.html
+++ b/client/login/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
-  <title>Admin Panel</title>
+  <title>Login to Admin Panel</title>
 </head>
 <body>
   <div id="app"></div>
diff --git a/client/login/out.js b/client/login/out.js
index cda39cd..d8bc253 100644
--- a/client/login/out.js
+++ b/client/login/out.js
@@ -154,7 +154,19 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
 /***/ (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 email and password, then click login button\",\n    \"login\": \"Login\",\n    \"email\": \"Email\",\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 settings\",\n    \"logout\": \"Logout\",\n    \"click-to-logout\": \"Click to logout 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?");
+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 email and password, then click login button\",\n    \"login\": \"Login\",\n    \"email\": \"Email\",\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 settings\",\n    \"logout\": \"Logout\",\n    \"click-to-logout\": \"Click to logout 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    \"main-information\": \"Main information\",\n    \"website-title\": \"Website title\",\n    \"website-title-hover\": \"Website title should have less than 55 characters, it will be displayed on the browser tab and will help search engines find your page\",\n    \"website-description\": \"Website description\",\n    \"website-description-hover\": \"Website description should have around 150 characters, it will be displayed on search results under website title\",\n    \"upload-favicon\": \"Website's favicon\",\n    \"upload-favicon-hover\": \"Click to add favicon for your website (32x32px)\",\n    \"next\": \"Next\",\n    \"creator-next-hover\": \"Click to navigate to next screen\",\n    \"cancel\": \"Cancel\",\n    \"creator-cancel-hover\": \"Click to exit creator without saving changes\",\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/View.jsx":
+/*!****************************************!*\
+  !*** ./client/src/admin/hocs/View.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 _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 View = function View(view) {\n  var _useContext = (0, _react.useContext)(_context2.default),\n      setView = _useContext.setView;\n\n  return function () {\n    return setView(view);\n  };\n};\n\nexports.default = View;\n\n//# sourceURL=webpack:///./client/src/admin/hocs/View.jsx?");
 
 /***/ }),
 
@@ -186,59 +198,59 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /*!****************************************!*\
   !*** ./client/src/admin/hocs/index.js ***!
   \****************************************/
-/*! exports provided: WithHover, t */
+/*! exports provided: WithHover, t, goTo */
 /***/ (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?");
+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/* harmony import */ var _View_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./View.jsx */ \"./client/src/admin/hocs/View.jsx\");\n/* harmony import */ var _View_jsx__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_View_jsx__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, \"goTo\", function() { return _View_jsx__WEBPACK_IMPORTED_MODULE_2___default.a; });\n\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 ***!
-  \***************************************/
+/***/ "./client/src/admin/jsx/layout/Info.jsx":
+/*!**********************************************!*\
+  !*** ./client/src/admin/jsx/layout/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 _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?");
+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/layout/Info.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/admin/jsx/LangSwitch.jsx":
-/*!*********************************************!*\
-  !*** ./client/src/admin/jsx/LangSwitch.jsx ***!
-  \*********************************************/
+/***/ "./client/src/admin/jsx/layout/LangSwitch.jsx":
+/*!****************************************************!*\
+  !*** ./client/src/admin/jsx/layout/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\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?");
+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/layout/LangSwitch.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/admin/jsx/TopBar.jsx":
-/*!*****************************************!*\
-  !*** ./client/src/admin/jsx/TopBar.jsx ***!
-  \*****************************************/
+/***/ "./client/src/admin/jsx/layout/TopBar.jsx":
+/*!************************************************!*\
+  !*** ./client/src/admin/jsx/layout/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?");
+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/layout/LangSwitch.jsx\");\n\nvar _LangSwitch2 = _interopRequireDefault(_LangSwitch);\n\nvar _UserSwitch = __webpack_require__(/*! ./UserSwitch.jsx */ \"./client/src/admin/jsx/layout/UserSwitch.jsx\");\n\nvar _UserSwitch2 = _interopRequireDefault(_UserSwitch);\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(_UserSwitch2.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/layout/TopBar.jsx?");
 
 /***/ }),
 
-/***/ "./client/src/admin/jsx/User.jsx":
-/*!***************************************!*\
-  !*** ./client/src/admin/jsx/User.jsx ***!
-  \***************************************/
+/***/ "./client/src/admin/jsx/layout/UserSwitch.jsx":
+/*!****************************************************!*\
+  !*** ./client/src/admin/jsx/layout/UserSwitch.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 _api = __webpack_require__(/*! ../api */ \"./client/src/admin/api/index.js\");\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, _api.logout)();\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.email\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?");
+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 _api = __webpack_require__(/*! ../../api */ \"./client/src/admin/api/index.js\");\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, _api.logout)();\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.email\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/layout/UserSwitch.jsx?");
 
 /***/ }),
 
@@ -262,7 +274,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */
 /***/ (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 _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 setLangHelper = function setLangHelper(key) {\n    setLang(key);\n    localStorage.setItem('language', key);\n  };\n\n  (0, _react.useEffect)(function () {\n    var savedLang = localStorage.getItem('language');\n    if (savedLang) {\n      setLang(savedLang);\n    }\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, {\n        lang: lang,\n        setLang: setLangHelper\n      }),\n      _react2.default.createElement(_LoginPanel2.default, null),\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?");
+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/layout/TopBar.jsx */ \"./client/src/admin/jsx/layout/TopBar.jsx\");\n\nvar _TopBar2 = _interopRequireDefault(_TopBar);\n\nvar _Info = __webpack_require__(/*! ../../admin/jsx/layout/Info.jsx */ \"./client/src/admin/jsx/layout/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 setLangHelper = function setLangHelper(key) {\n    setLang(key);\n    localStorage.setItem('language', key);\n  };\n\n  (0, _react.useEffect)(function () {\n    var savedLang = localStorage.getItem('language');\n    if (savedLang) {\n      setLang(savedLang);\n    }\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, {\n        lang: lang,\n        setLang: setLangHelper\n      }),\n      _react2.default.createElement(_LoginPanel2.default, null),\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?");
 
 /***/ }),
 
@@ -296,7 +308,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\\np {\\n  line-height: 1.5; }\\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: 1em;\\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  pointer-events: none; }\\n\\n.text-input-field {\\n  font-size: 1.25rem;\\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  padding: 1em 1.5em 1.5em 1.5em;\\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-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  width: 100%;\\n  text-align: right;\\n  white-space: nowrap;\\n  padding-bottom: 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  display: inline-block; }\\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  padding: 1.5em; }\\n  .login-panel__form {\\n    display: inline-block;\\n    width: 100%;\\n    max-width: 400px; }\\n\\n@keyframes shine {\\n  0% {\\n    background-size: 220% 100%; }\\n  7% {\\n    background-position: 0 100%; }\\n  100% {\\n    background-position: 0 100%; } }\\n  .login-panel__header {\\n    color: #fff;\\n    font-size: 1.75em;\\n    line-height: 1.5;\\n    margin-bottom: 4em;\\n    position: relative;\\n    display: inline-block;\\n    color: #fff;\\n    overflow: hidden;\\n    background: linear-gradient(to right, #fff 50%, orange 55%, #fff 60%);\\n    background-clip: text;\\n    -webkit-background-clip: text;\\n    -webkit-text-fill-color: transparent;\\n    background-position: 110%;\\n    animation: shine 15s ease-out;\\n    background-size: 220% 100%;\\n    animation-iteration-count: infinite;\\n    animation-delay: 8s; }\\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    .login-panel__button.active {\\n      cursor: pointer;\\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  user-select: none; }\\n\\np {\\n  line-height: 1.5; }\\n\\n.text-input,\\n.text-area {\\n  text-align: left;\\n  margin-bottom: 1.5em;\\n  transition: all .3s;\\n  cursor: text; }\\n  .text-input:focus-within,\\n  .text-area:focus-within {\\n    transform: scale(1.05, 1.05); }\\n\\n.text-input-label,\\n.text-area-label {\\n  font-size: 1em;\\n  width: 100%;\\n  color: #aaa;\\n  display: block;\\n  transform-origin: 0 0;\\n  transition: all .3s;\\n  z-index: -1;\\n  cursor: text;\\n  pointer-events: none; }\\n\\n.text-input-label {\\n  transform: translateY(-1.75em); }\\n\\n.text-area-label {\\n  transform: translateY(-2em); }\\n\\n.text-input-field,\\n.text-area textarea {\\n  font-size: 1.25em;\\n  box-shadow: none;\\n  background: #181818;\\n  color: orange;\\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  -webkit-user-select: auto;\\n  user-select: auto; }\\n  .text-input-field::placeholder,\\n  .text-area textarea::placeholder {\\n    color: transparent; }\\n  .text-input-field:focus,\\n  .text-area textarea:focus {\\n    box-shadow: none;\\n    outline: none;\\n    border-color: orange; }\\n\\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.text-area textarea {\\n  height: 6em;\\n  resize: none;\\n  overflow: hidden; }\\n  .text-area textarea:focus + .text-area-label,\\n  .text-area textarea:not(:placeholder-shown) + .text-area-label {\\n    transform: translateY(-6.5em) scale(0.8); }\\n\\n.main {\\n  display: flex;\\n  flex-direction: column;\\n  justify-content: space-between;\\n  position: fixed;\\n  padding: 1em 1.5em 1.5em 1.5em;\\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-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  width: 100%;\\n  text-align: right;\\n  white-space: nowrap;\\n  padding-bottom: 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  display: inline-block; }\\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  padding: 1.5em; }\\n  .login-panel__form {\\n    display: inline-block;\\n    width: 100%;\\n    max-width: 400px; }\\n\\n@keyframes shine {\\n  0% {\\n    background-size: 220% 100%; }\\n  7% {\\n    background-position: 0 100%; }\\n  100% {\\n    background-position: 0 100%; } }\\n  .login-panel__header {\\n    color: #fff;\\n    font-size: 1.75em;\\n    line-height: 1.5;\\n    margin-bottom: 4em;\\n    position: relative;\\n    display: inline-block;\\n    color: #fff;\\n    overflow: hidden;\\n    background: linear-gradient(to right, #fff 50%, orange 55%, #fff 60%);\\n    background-clip: text;\\n    -webkit-background-clip: text;\\n    -webkit-text-fill-color: transparent;\\n    background-position: 110%;\\n    animation: shine 15s ease-out;\\n    background-size: 220% 100%;\\n    animation-iteration-count: infinite;\\n    animation-delay: 8s; }\\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    .login-panel__button.active {\\n      cursor: pointer;\\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/data/translations.js b/client/src/admin/data/translations.js
index 732e311..b7a8161 100644
--- a/client/src/admin/data/translations.js
+++ b/client/src/admin/data/translations.js
@@ -21,6 +21,17 @@ export const translations = {
     "click-to-logout": "Click to logout current user",
     "user-settings": "User settings",
     "click-to-change-user-settings": "Click to change user name, password or to completely remove current user",
+    "main-information": "Main information",
+    "website-title": "Website title",
+    "website-title-hover": "Website title should have less than 55 characters, it will be displayed on the browser tab and will help search engines find your page",
+    "website-description": "Website description",
+    "website-description-hover": "Website description should have around 150 characters, it will be displayed on search results under website title",
+    "upload-favicon": "Website's favicon",
+    "upload-favicon-hover": "Click to add favicon for your website (32x32px)",
+    "next": "Next",
+    "creator-next-hover": "Click to navigate to next screen",
+    "cancel": "Cancel",
+    "creator-cancel-hover": "Click to exit creator without saving changes",
   },
   "de": {
     "main-title": "Website Manager",
diff --git a/client/src/admin/hocs/View.jsx b/client/src/admin/hocs/View.jsx
new file mode 100644
index 0000000..3c654c2
--- /dev/null
+++ b/client/src/admin/hocs/View.jsx
@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+import Context from '../context';
+
+const View = (view) => {
+  const { setView } = useContext(Context);
+  return () => setView(view);
+};
+
+export default View;
diff --git a/client/src/admin/hocs/index.js b/client/src/admin/hocs/index.js
index df8c0c7..4abd050 100644
--- a/client/src/admin/hocs/index.js
+++ b/client/src/admin/hocs/index.js
@@ -1,4 +1,5 @@
 import WithHover from './WithHover.jsx';
 import WithTranslation from './WithTranslation.jsx';
+import View from './View.jsx';
 
-export { WithHover, WithTranslation as t };
+export { WithHover, WithTranslation as t, View as goTo };
diff --git a/client/src/admin/jsx/App.jsx b/client/src/admin/jsx/App.jsx
index 1bb224f..cb82e90 100644
--- a/client/src/admin/jsx/App.jsx
+++ b/client/src/admin/jsx/App.jsx
@@ -3,9 +3,10 @@ import ReactDOM from 'react-dom';
 
 import "../scss/index.scss";
 
-import TopBar from './TopBar.jsx';
-import Info from './Info.jsx';
+import TopBar from './layout/TopBar.jsx';
+import Info from './layout/Info.jsx';
 import MainScreen from './MainScreen.jsx';
+import Creator from './creator/Creator.jsx';
 import Context from '../context';
 import { defaultLanguage } from '../data/translations';
 import { getUser, setDbLang } from '../api';
@@ -33,11 +34,12 @@ const App = () => {
   }, [user]);
 
   return (
-    <Context.Provider value={{ lang, setHover, setInfo }}>
+    <Context.Provider value={{ lang, setHover, setInfo, setView }}>
       <div className="main">
         <TopBar lang={lang} setLang={setLangWithDb} user={user} setUser={setUser} />
         <div className="main__content">
           { view === 'main' && <MainScreen projects={projects} /> }
+          { view === 'creator' && <Creator projects={projects} /> }
         </div>
         <Info info={info} hover={hover} />
       </div>
diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx
index 3d65384..ea2def5 100644
--- a/client/src/admin/jsx/MainScreen.jsx
+++ b/client/src/admin/jsx/MainScreen.jsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { WithHover, t } from '../hocs';
+import { WithHover, t, goTo } from '../hocs';
 
 const MainScreen = ({ projects }) => (
   <div className="main-screen">
@@ -16,7 +16,9 @@ const MainScreen = ({ projects }) => (
         </WithHover>
       )}
       <WithHover message="create-new-project-hover">
-        <p className="main-screen__item">{ t('create-new-project') }</p>
+        <p className="main-screen__item" onClick={ goTo('creator') }>
+          { t('create-new-project') }
+        </p>
       </WithHover>
     </div>
   </div>
diff --git a/client/src/admin/jsx/creator/Creator.jsx b/client/src/admin/jsx/creator/Creator.jsx
new file mode 100644
index 0000000..896235e
--- /dev/null
+++ b/client/src/admin/jsx/creator/Creator.jsx
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import Step1 from './Step1';
+import { t, goTo } from '../../hocs';
+
+const Creator = ({projects}) => {
+  const [step, setStep] = useState('step1');
+
+  switch(step) {
+    case 'step1':
+      return <Step1 setStep={setStep} />;
+    case 'step2':
+      return null;
+    default:
+      return null;
+  }
+};
+
+export default Creator;
diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx
new file mode 100644
index 0000000..647661e
--- /dev/null
+++ b/client/src/admin/jsx/creator/Step1.jsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { WithHover, t, goTo } from '../../hocs';
+
+const Step1 = () => {
+  const [websiteTitle, setWebsiteTitle] = useState('');
+  const [websiteDescription, setWebsiteDescription] = useState('');
+  const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : '';
+
+  return (
+    <div className="creator">
+      <div className="creator__header">{ t('main-information') }</div>
+      <div className="creator__input-line">
+        <WithHover message="website-title-hover">
+          <div className="text-input">
+            <input
+              onChange={e => setWebsiteTitle(e.target.value)}
+              placeholder={t('website-title')}
+              id="website-title"
+              name="website-title"
+              type="text"
+              className="text-input-field"
+              value={websiteTitle}
+            />
+            <label htmlFor="website-title" className="text-input-label">{`${t('website-title')} (${websiteTitle.length})`}</label>
+          </div>
+        </WithHover>
+      </div>
+      <div className="creator__input-line">
+        <WithHover message="website-description-hover">
+          <div className="text-area">
+            <textarea
+              onChange={e => setWebsiteDescription(e.target.value)}
+              id="website-description"
+              name="website-description"
+              placeholder={t('website-description')}>
+            </textarea>
+            <label htmlFor="website-description" className="text-area-label">{`${t('website-description')} (${websiteDescription.length})`}</label>
+          </div>
+        </WithHover>
+      </div>
+      <div className="creator__input-line">
+        <div className='creator__favicon'>
+          <WithHover message="upload-favicon-hover">
+            <div className="creator__favicon-ico">+</div>
+          </WithHover>
+          <span className="creator__favicon-text">
+            {t('upload-favicon')}
+          </span>
+        </div>
+      </div>
+      <div className="creator__btns">
+        <WithHover message="creator-cancel-hover">
+          <div onClick={goTo('main')} className="creator__btns-cancel">
+            {t('cancel')}
+          </div>
+        </WithHover>
+        <WithHover message="creator-next-hover">
+          <div className={`creator__btns-next ${isNextActive}`}>
+            {t('next')}
+          </div>
+        </WithHover>
+      </div>
+    </div>
+  )
+};
+
+export default Step1;
diff --git a/client/src/admin/jsx/Info.jsx b/client/src/admin/jsx/layout/Info.jsx
index 75294e1..0ea8686 100644
--- a/client/src/admin/jsx/Info.jsx
+++ b/client/src/admin/jsx/layout/Info.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { t } from '../hocs';
+import { t } from '../../hocs';
 
 const Info = ({ info, hover }) => (
   <p className="info">
diff --git a/client/src/admin/jsx/LangSwitch.jsx b/client/src/admin/jsx/layout/LangSwitch.jsx
index 2494bef..684d432 100644
--- a/client/src/admin/jsx/LangSwitch.jsx
+++ b/client/src/admin/jsx/layout/LangSwitch.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithHover } from '../hocs';
-import { languages } from '../data/translations.js'
+import { WithHover } from '../../hocs';
+import { languages } from '../../data/translations.js'
 
 const LangSwitch = ({ lang, setLang, opened, setOpened}) => {
   const handleSetLang = (key) => {
diff --git a/client/src/admin/jsx/TopBar.jsx b/client/src/admin/jsx/layout/TopBar.jsx
index e9be676..b6564f7 100644
--- a/client/src/admin/jsx/TopBar.jsx
+++ b/client/src/admin/jsx/layout/TopBar.jsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import LangSwitch from './LangSwitch.jsx';
-import User from './User.jsx';
+import UserSwitch from './UserSwitch.jsx';
 
 const TopBar = ({ user, setUser, lang, setLang }) => {
   const [opened, setOpened] = useState(false);
@@ -20,7 +20,7 @@ const TopBar = ({ user, setUser, lang, setLang }) => {
         setOpened={setOpened}
       />
         { user && (
-          <User
+          <UserSwitch
             user={user}
             setUser={setUser}
             opened={opened}
diff --git a/client/src/admin/jsx/User.jsx b/client/src/admin/jsx/layout/UserSwitch.jsx
index eb596bf..403783c 100644
--- a/client/src/admin/jsx/User.jsx
+++ b/client/src/admin/jsx/layout/UserSwitch.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithHover, t } from '../hocs';
-import { logout } from '../api';
+import { WithHover, t } from '../../hocs';
+import { logout } from '../../api';
 
 const User = ({ user, setUser, opened, setOpened }) => {
   const handleLogout = () => {
diff --git a/client/src/admin/scss/_creator.scss b/client/src/admin/scss/_creator.scss
new file mode 100644
index 0000000..0bf267e
--- /dev/null
+++ b/client/src/admin/scss/_creator.scss
@@ -0,0 +1,81 @@
+.creator {
+  text-align: center;
+  width: 100%;
+
+  &__header {
+    color: $text;
+    text-align: center;
+    font-size: 1.5em;
+    padding-bottom: 1.5em;
+  }
+
+  &__input-line {
+    max-width: 600px;
+    margin: 0 auto;
+    align-items: center;
+    padding: 1em 0;
+  }
+
+  &__favicon {
+    display: flex;
+
+    &-ico {
+      height: 32px;
+      width: 32px;
+      line-height: 32px;
+      background: $text-inactive;
+      color: $background-menu;
+      border: 1px solid $background-menu;
+      transition: .3s background;
+      cursor: pointer;
+
+      &:hover {
+        background: $text-selected;
+      }
+    }
+
+    &-text {
+      color: $text-inactive;
+      font-size: 1em;
+      line-height: 32px;
+      padding-left: 1em;
+    }
+  }
+
+  &__btns {
+    padding-top: 3em;
+    font-size: 1.5em;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+
+    &-next {
+      color: $text-inactive;
+      display: inline-block;
+      padding: 1em;
+
+      &.active {
+        color: $text;
+        transition: .3s color;
+        cursor: pointer;
+
+        &:hover {
+          color: $text-selected;
+        }
+      }
+    }
+
+    &-cancel {
+      display: inline-block;
+      color: $text;
+      transition: .3s color;
+      cursor: pointer;
+      padding: 1em;
+
+      &:hover {
+        color: $text-selected;
+      }
+    }
+  }
+}
diff --git a/client/src/admin/scss/_forms.scss b/client/src/admin/scss/_forms.scss
index e74c343..3e98014 100644
--- a/client/src/admin/scss/_forms.scss
+++ b/client/src/admin/scss/_forms.scss
@@ -1,6 +1,7 @@
 // Text Input
 
-.text-input {
+.text-input,
+.text-area {
   text-align: left;
   margin-bottom: 1.5em;
   transition: all .3s;
@@ -11,12 +12,12 @@
   }
 }
 
-.text-input-label {
+.text-input-label,
+.text-area-label {
   font-size: 1em;
   width: 100%;
   color: #aaa;
   display:block;
-  transform:translateY(-1.75em);
   transform-origin: 0 0;
   transition: all .3s;
   z-index: -1;
@@ -24,17 +25,28 @@
   pointer-events: none;
 }
 
-.text-input-field {
-  font-size: 1.25rem;
+.text-input-label {
+  transform:translateY(-1.75em);
+}
+
+.text-area-label {
+  transform:translateY(-2em);
+}
+
+.text-input-field,
+.text-area textarea {
+  font-size: 1.25em;
   box-shadow: none;
   background: $background;
-  color: $text;
+  color: $text-selected;
   border-radius: 0;
   border-color: #ccc;
   border-style: none none solid none;
   width: 100%;
   transition: all .5s;
   padding: 5px;
+  -webkit-user-select: auto;
+  user-select: auto;
 
   &::placeholder {
     color: transparent;
@@ -46,8 +58,22 @@
     border-color: $text-selected;
   }
 
+}
+
+.text-input-field {
   &:focus + .text-input-label,
   &:not(:placeholder-shown) + .text-input-label {
     transform: translateY(-3em) scale(0.8);
   }
 }
+
+.text-area textarea {
+  height: 6em;
+  resize: none;
+  overflow:hidden;
+
+  &:focus + .text-area-label,
+  &:not(:placeholder-shown) + .text-area-label {
+    transform: translateY(-6.5em) scale(0.8);
+  }
+}
diff --git a/client/src/admin/scss/_globals.scss b/client/src/admin/scss/_globals.scss
index d15363f..1039f4b 100644
--- a/client/src/admin/scss/_globals.scss
+++ b/client/src/admin/scss/_globals.scss
@@ -4,9 +4,6 @@ html {
 
 * {
   -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: -moz-none;
-  -o-user-select: none;
   user-select: none;
 }
 
diff --git a/client/src/admin/scss/index.scss b/client/src/admin/scss/index.scss
index ab61dd9..8290be8 100644
--- a/client/src/admin/scss/index.scss
+++ b/client/src/admin/scss/index.scss
@@ -6,3 +6,4 @@
 @import 'info';
 @import 'topBar';
 @import 'mainScreen';
+@import 'creator';
diff --git a/client/src/login/jsx/App.jsx b/client/src/login/jsx/App.jsx
index 58256a8..e5921fc 100644
--- a/client/src/login/jsx/App.jsx
+++ b/client/src/login/jsx/App.jsx
@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom';
 
 import "../scss/index.scss";
 
-import TopBar from '../../admin/jsx/TopBar.jsx';
-import Info from '../../admin/jsx/Info.jsx';
+import TopBar from '../../admin/jsx/layout/TopBar.jsx';
+import Info from '../../admin/jsx/layout/Info.jsx';
 import LoginPanel from './LoginPanel.jsx';
 import Context from '../../admin/context';
 import { defaultLanguage } from '../../admin/data/translations';