summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--client/admin/out.js46
-rw-r--r--client/login/out.js2
-rw-r--r--client/src/admin/data/translations.js2
-rw-r--r--client/src/admin/helpers/index.js3
-rw-r--r--client/src/admin/helpers/onKeyPress.js7
-rw-r--r--client/src/admin/jsx/MainScreen.jsx22
-rw-r--r--client/src/admin/jsx/creator/Creator.jsx6
-rw-r--r--client/src/admin/jsx/creator/Step1.jsx51
-rw-r--r--client/src/admin/jsx/creator/Step2.jsx32
-rw-r--r--client/src/admin/scss/_creator.scss20
-rw-r--r--client/src/admin/scss/_mainScreen.scss5
11 files changed, 174 insertions, 22 deletions
diff --git a/client/admin/out.js b/client/admin/out.js
index 74544fb..ce7f9e3 100644
--- a/client/admin/out.js
+++ b/client/admin/out.js
@@ -154,7 +154,31 @@ 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 \"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?");
+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 \"back\": \"Back\",\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 \"website-sections\": \"Website Sections\",\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/helpers/index.js":
+/*!*******************************************!*\
+ !*** ./client/src/admin/helpers/index.js ***!
+ \*******************************************/
+/*! exports provided: onKeyPress */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _onKeyPress__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./onKeyPress */ \"./client/src/admin/helpers/onKeyPress.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"onKeyPress\", function() { return _onKeyPress__WEBPACK_IMPORTED_MODULE_0__[\"default\"]; });\n\n\n\n\n\n\n//# sourceURL=webpack:///./client/src/admin/helpers/index.js?");
+
+/***/ }),
+
+/***/ "./client/src/admin/helpers/onKeyPress.js":
+/*!************************************************!*\
+ !*** ./client/src/admin/helpers/onKeyPress.js ***!
+ \************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\nconst onKeyPress = (e) => {\n if (e.charCode === 13 || e.charCode === 32) {\n e.target.click();\n }\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (onKeyPress);\n\n\n//# sourceURL=webpack:///./client/src/admin/helpers/onKeyPress.js?");
/***/ }),
@@ -226,7 +250,7 @@ eval("\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { va
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _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?");
+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 _helpers = __webpack_require__(/*! ../helpers */ \"./client/src/admin/helpers/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 {\n className: 'main-screen__item',\n tabIndex: '0'\n },\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 {\n className: 'main-screen__item',\n tabIndex: '0'\n },\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 {\n className: 'main-screen__item',\n onClick: (0, _hocs.goTo)('creator'),\n onKeyPress: _helpers.onKeyPress,\n tabIndex: '0'\n },\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?");
/***/ }),
@@ -238,7 +262,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n
/***/ (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 _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?");
+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 _Step3 = __webpack_require__(/*! ./Step2 */ \"./client/src/admin/jsx/creator/Step2.jsx\");\n\nvar _Step4 = _interopRequireDefault(_Step3);\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 var _useState3 = (0, _react.useState)({}),\n _useState4 = _slicedToArray(_useState3, 2),\n data = _useState4[0],\n setData = _useState4[1];\n\n switch (step) {\n case 'step1':\n return _react2.default.createElement(_Step2.default, { setStep: setStep, data: data, setData: setData });\n case 'step2':\n return _react2.default.createElement(_Step4.default, { setStep: setStep, data: data, setData: setData });\n default:\n return null;\n }\n};\n\nexports.default = Creator;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/creator/Creator.jsx?");
/***/ }),
@@ -250,7 +274,19 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n
/***/ (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 _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?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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\nvar _helpers = __webpack_require__(/*! ../../helpers */ \"./client/src/admin/helpers/index.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Step1 = function Step1(_ref) {\n var setStep = _ref.setStep,\n data = _ref.data,\n setData = _ref.setData;\n\n var _useState = (0, _react.useState)(data.websiteTitle || ''),\n _useState2 = _slicedToArray(_useState, 2),\n websiteTitle = _useState2[0],\n setWebsiteTitle = _useState2[1];\n\n var _useState3 = (0, _react.useState)(data.websiteDescription || ''),\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 var uploadFavicon = function uploadFavicon() {\n return console.log('this will upload favicon');\n };\n\n var handleNext = function handleNext() {\n if (isNextActive) {\n setData(_extends({}, data, { websiteTitle: websiteTitle, websiteDescription: websiteDescription }));\n setStep('step2');\n }\n };\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 value: websiteDescription\n }),\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 {\n className: 'creator__favicon-ico',\n onKeyPress: _helpers.onKeyPress,\n onClick: uploadFavicon,\n tabIndex: '0'\n },\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 {\n onClick: (0, _hocs.goTo)('main'),\n onKeyPress: _helpers.onKeyPress,\n className: 'creator__btns-cancel',\n tabIndex: '0'\n },\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 {\n className: 'creator__btns-next ' + isNextActive,\n onClick: handleNext,\n onKeyPress: _helpers.onKeyPress,\n tabIndex: isNextActive ? \"0\" : \"-1\"\n },\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/creator/Step2.jsx":
+/*!************************************************!*\
+ !*** ./client/src/admin/jsx/creator/Step2.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 Step2 = function Step2(_ref) {\n var setStep = _ref.setStep,\n data = _ref.data,\n setData = _ref.setData;\n\n console.log(data);\n var isNextActive = function isNextActive() {};\n var handleNext = function handleNext() {};\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)('website-sections')\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: function onClick() {\n return setStep('step1');\n }, className: 'creator__btns-cancel' },\n (0, _hocs.t)('back')\n )\n ),\n _react2.default.createElement(\n _hocs.WithHover,\n { message: 'creator-next-hover' },\n _react2.default.createElement(\n 'div',\n {\n className: 'creator__btns-next ' + isNextActive,\n onClick: handleNext\n },\n (0, _hocs.t)('next')\n )\n )\n )\n );\n};\n\nexports.default = Step2;\n\n//# sourceURL=webpack:///./client/src/admin/jsx/creator/Step2.jsx?");
/***/ }),
@@ -320,7 +356,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 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");
+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 outline-width: 0; }\\n .main-screen__item:hover {\\n color: orange; }\\n .main-screen__item:focus {\\n border-bottom: 2px solid 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-ico:focus {\\n outline: 2px solid 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: .5em;\\n margin: 0 1em;\\n outline: none; }\\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-next.active:focus {\\n border-bottom: 2px solid orange; }\\n .creator__btns-cancel {\\n display: inline-block;\\n color: #fff;\\n transition: .3s color;\\n cursor: pointer;\\n padding: .5em;\\n margin: 0 1em;\\n outline-width: 0; }\\n .creator__btns-cancel:hover {\\n color: orange; }\\n .creator__btns-cancel:focus {\\n border-bottom: 2px solid orange; }\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./client/src/admin/scss/index.scss?./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js");
/***/ }),
diff --git a/client/login/out.js b/client/login/out.js
index d8bc253..d7fa3e2 100644
--- a/client/login/out.js
+++ b/client/login/out.js
@@ -154,7 +154,7 @@ 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 \"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?");
+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 \"back\": \"Back\",\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 \"website-sections\": \"Website Sections\",\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?");
/***/ }),
diff --git a/client/src/admin/data/translations.js b/client/src/admin/data/translations.js
index b7a8161..e2dd628 100644
--- a/client/src/admin/data/translations.js
+++ b/client/src/admin/data/translations.js
@@ -28,10 +28,12 @@ export const translations = {
"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)",
+ "back": "Back",
"next": "Next",
"creator-next-hover": "Click to navigate to next screen",
"cancel": "Cancel",
"creator-cancel-hover": "Click to exit creator without saving changes",
+ "website-sections": "Website Sections",
},
"de": {
"main-title": "Website Manager",
diff --git a/client/src/admin/helpers/index.js b/client/src/admin/helpers/index.js
new file mode 100644
index 0000000..9b6d031
--- /dev/null
+++ b/client/src/admin/helpers/index.js
@@ -0,0 +1,3 @@
+import onKeyPress from './onKeyPress';
+
+export { onKeyPress };
diff --git a/client/src/admin/helpers/onKeyPress.js b/client/src/admin/helpers/onKeyPress.js
new file mode 100644
index 0000000..142a9cf
--- /dev/null
+++ b/client/src/admin/helpers/onKeyPress.js
@@ -0,0 +1,7 @@
+const onKeyPress = (e) => {
+ if (e.charCode === 13 || e.charCode === 32) {
+ e.target.click();
+ }
+}
+
+export default onKeyPress;
diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx
index ea2def5..8808dc5 100644
--- a/client/src/admin/jsx/MainScreen.jsx
+++ b/client/src/admin/jsx/MainScreen.jsx
@@ -1,5 +1,6 @@
import React, { Fragment } from 'react';
import { WithHover, t, goTo } from '../hocs';
+import { onKeyPress } from '../helpers'
const MainScreen = ({ projects }) => (
<div className="main-screen">
@@ -7,16 +8,31 @@ const MainScreen = ({ projects }) => (
<div className="main-screen__list">
{ !projects.length && (
<WithHover message="edit-current-project-hover">
- <p className="main-screen__item">{ t('edit-current-project') }</p>
+ <p
+ className="main-screen__item"
+ tabIndex="0"
+ >
+ { t('edit-current-project') }
+ </p>
</WithHover>
)}
{ !projects.length && (
<WithHover message="show-saved-projects-hover">
- <p className="main-screen__item">{ t('show-saved-projects') }</p>
+ <p
+ className="main-screen__item"
+ tabIndex="0"
+ >
+ { t('show-saved-projects') }
+ </p>
</WithHover>
)}
<WithHover message="create-new-project-hover">
- <p className="main-screen__item" onClick={ goTo('creator') }>
+ <p
+ className="main-screen__item"
+ onClick={ goTo('creator') }
+ onKeyPress={onKeyPress}
+ tabIndex="0"
+ >
{ t('create-new-project') }
</p>
</WithHover>
diff --git a/client/src/admin/jsx/creator/Creator.jsx b/client/src/admin/jsx/creator/Creator.jsx
index 896235e..fa552b3 100644
--- a/client/src/admin/jsx/creator/Creator.jsx
+++ b/client/src/admin/jsx/creator/Creator.jsx
@@ -1,15 +1,17 @@
import React, { useState } from 'react';
import Step1 from './Step1';
+import Step2 from './Step2';
import { t, goTo } from '../../hocs';
const Creator = ({projects}) => {
const [step, setStep] = useState('step1');
+ const [data, setData] = useState({});
switch(step) {
case 'step1':
- return <Step1 setStep={setStep} />;
+ return <Step1 setStep={setStep} data={data} setData={setData} />;
case 'step2':
- return null;
+ return <Step2 setStep={setStep} data={data} setData={setData} />;
default:
return null;
}
diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx
index 647661e..3e2e05d 100644
--- a/client/src/admin/jsx/creator/Step1.jsx
+++ b/client/src/admin/jsx/creator/Step1.jsx
@@ -1,11 +1,23 @@
import React, { useState } from 'react';
import { WithHover, t, goTo } from '../../hocs';
+import { onKeyPress } from '../../helpers'
-const Step1 = () => {
- const [websiteTitle, setWebsiteTitle] = useState('');
- const [websiteDescription, setWebsiteDescription] = useState('');
+const Step1 = ({ setStep, data, setData }) => {
+ const [websiteTitle, setWebsiteTitle] = useState(data.websiteTitle || '');
+ const [websiteDescription, setWebsiteDescription] = useState(data.websiteDescription || '');
const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : '';
+ const uploadFavicon = () => (
+ console.log('this will upload favicon')
+ )
+
+ const handleNext = () => {
+ if (isNextActive) {
+ setData({ ...data, websiteTitle, websiteDescription });
+ setStep('step2');
+ }
+ }
+
return (
<div className="creator">
<div className="creator__header">{ t('main-information') }</div>
@@ -21,7 +33,9 @@ const Step1 = () => {
className="text-input-field"
value={websiteTitle}
/>
- <label htmlFor="website-title" className="text-input-label">{`${t('website-title')} (${websiteTitle.length})`}</label>
+ <label htmlFor="website-title" className="text-input-label">
+ {`${t('website-title')} (${websiteTitle.length})`}
+ </label>
</div>
</WithHover>
</div>
@@ -32,16 +46,25 @@ const Step1 = () => {
onChange={e => setWebsiteDescription(e.target.value)}
id="website-description"
name="website-description"
- placeholder={t('website-description')}>
+ placeholder={t('website-description')}
+ value={websiteDescription}
+ >
</textarea>
- <label htmlFor="website-description" className="text-area-label">{`${t('website-description')} (${websiteDescription.length})`}</label>
+ <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>
+ <div
+ className="creator__favicon-ico"
+ onKeyPress={onKeyPress}
+ onClick={uploadFavicon}
+ tabIndex="0"
+ >+</div>
</WithHover>
<span className="creator__favicon-text">
{t('upload-favicon')}
@@ -50,12 +73,22 @@ const Step1 = () => {
</div>
<div className="creator__btns">
<WithHover message="creator-cancel-hover">
- <div onClick={goTo('main')} className="creator__btns-cancel">
+ <div
+ onClick={goTo('main')}
+ onKeyPress={onKeyPress}
+ className="creator__btns-cancel"
+ tabIndex="0"
+ >
{t('cancel')}
</div>
</WithHover>
<WithHover message="creator-next-hover">
- <div className={`creator__btns-next ${isNextActive}`}>
+ <div
+ className={`creator__btns-next ${isNextActive}`}
+ onClick={handleNext}
+ onKeyPress={onKeyPress}
+ tabIndex={isNextActive ? "0" : "-1"}
+ >
{t('next')}
</div>
</WithHover>
diff --git a/client/src/admin/jsx/creator/Step2.jsx b/client/src/admin/jsx/creator/Step2.jsx
new file mode 100644
index 0000000..d8ce009
--- /dev/null
+++ b/client/src/admin/jsx/creator/Step2.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { WithHover, t } from '../../hocs';
+
+const Step2 = ({ setStep, data, setData }) => {
+ console.log(data)
+ const isNextActive = () => {}
+ const handleNext = () => {}
+
+ return (
+ <div className="creator">
+ <div className="creator__header">{ t('website-sections') }</div>
+
+ <div className="creator__btns">
+ <WithHover message="creator-cancel-hover">
+ <div onClick={() => setStep('step1')} className="creator__btns-cancel">
+ {t('back')}
+ </div>
+ </WithHover>
+ <WithHover message="creator-next-hover">
+ <div
+ className={`creator__btns-next ${isNextActive}`}
+ onClick={handleNext}
+ >
+ {t('next')}
+ </div>
+ </WithHover>
+ </div>
+ </div>
+ )
+}
+
+export default Step2;
diff --git a/client/src/admin/scss/_creator.scss b/client/src/admin/scss/_creator.scss
index 0bf267e..696208c 100644
--- a/client/src/admin/scss/_creator.scss
+++ b/client/src/admin/scss/_creator.scss
@@ -32,6 +32,10 @@
&:hover {
background: $text-selected;
}
+
+ &:focus {
+ outline: 2px solid $text-selected;
+ }
}
&-text {
@@ -53,7 +57,9 @@
&-next {
color: $text-inactive;
display: inline-block;
- padding: 1em;
+ padding: .5em;
+ margin: 0 1em;
+ outline: none;
&.active {
color: $text;
@@ -63,6 +69,10 @@
&:hover {
color: $text-selected;
}
+
+ &:focus {
+ border-bottom: 2px solid $text-selected;
+ }
}
}
@@ -71,11 +81,17 @@
color: $text;
transition: .3s color;
cursor: pointer;
- padding: 1em;
+ padding: .5em;
+ margin: 0 1em;
+ outline-width: 0;
&:hover {
color: $text-selected;
}
+
+ &:focus {
+ border-bottom: 2px solid $text-selected;
+ }
}
}
}
diff --git a/client/src/admin/scss/_mainScreen.scss b/client/src/admin/scss/_mainScreen.scss
index e9eeeb3..051a037 100644
--- a/client/src/admin/scss/_mainScreen.scss
+++ b/client/src/admin/scss/_mainScreen.scss
@@ -39,10 +39,15 @@
cursor: pointer;
margin-top: 5vh;
margin-bottom: 5vh;
+ outline-width: 0;
&:hover {
color: $text-selected;
}
+
+ &:focus {
+ border-bottom: 2px solid $text-selected;
+ }
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 14:05:02 +0000