From 4a9cf28660ed3b7e02952d02035978d1d4ad3e7e Mon Sep 17 00:00:00 2001 From: Piotr Russ Date: Wed, 9 Dec 2020 23:26:30 +0100 Subject: add creator 2nd step & onKeyPress helper --- client/admin/out.js | 46 ++++++++++++++++++++++++---- client/login/out.js | 2 +- client/src/admin/data/translations.js | 2 ++ client/src/admin/helpers/index.js | 3 ++ client/src/admin/helpers/onKeyPress.js | 7 +++++ client/src/admin/jsx/MainScreen.jsx | 22 ++++++++++++-- client/src/admin/jsx/creator/Creator.jsx | 6 ++-- client/src/admin/jsx/creator/Step1.jsx | 51 ++++++++++++++++++++++++++------ client/src/admin/jsx/creator/Step2.jsx | 32 ++++++++++++++++++++ client/src/admin/scss/_creator.scss | 20 +++++++++++-- client/src/admin/scss/_mainScreen.scss | 5 ++++ 11 files changed, 174 insertions(+), 22 deletions(-) create mode 100644 client/src/admin/helpers/index.js create mode 100644 client/src/admin/helpers/onKeyPress.js create mode 100644 client/src/admin/jsx/creator/Step2.jsx (limited to 'client') 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 }) => (
@@ -7,16 +8,31 @@ const MainScreen = ({ projects }) => (
{ !projects.length && ( -

{ t('edit-current-project') }

+

+ { t('edit-current-project') } +

)} { !projects.length && ( -

{ t('show-saved-projects') }

+

+ { t('show-saved-projects') } +

)} -

+

{ t('create-new-project') }

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 ; + return ; case 'step2': - return null; + return ; 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 (
{ t('main-information') }
@@ -21,7 +33,9 @@ const Step1 = () => { className="text-input-field" value={websiteTitle} /> - +
@@ -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} + > - +
-
+
+
+
 {t('upload-favicon')} @@ -50,12 +73,22 @@ const Step1 = () => {
-
+
{t('cancel')}
-
+
{t('next')}
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 ( +
+
{ t('website-sections') }
+ +
+ +
setStep('step1')} className="creator__btns-cancel"> + {t('back')} +
+ + +
+ {t('next')} +
+ +
+
+ ) +} + +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; + } } } -- cgit v1.2.3