From 44e9fc3b279009f4cee75dbd9ffc4e82808aa8b7 Mon Sep 17 00:00:00 2001 From: Yeliazar Date: Thu, 22 Jul 2021 13:28:19 +0300 Subject: [PATCH 1/2] updated styling layout, buttons, tables, notifications, alerts, badges --- changelog.md | 9 ++ package.json | 2 +- src/components/Header/Header.js | 2 +- src/components/Layout/Layout.module.scss | 2 +- .../Sidebar/LinksGroup/LinksGroup.module.scss | 8 +- src/components/Widget/Widget.module.scss | 3 +- src/pages/buttons/Buttons.js | 107 +++++++++--------- src/pages/buttons/Buttons.module.scss | 3 + src/pages/dashboard/Dashboard.js | 33 +++--- src/pages/dashboard/Dashboard.module.scss | 9 +- src/pages/icons/Icons.js | 16 ++- src/pages/notifications/Notifications.js | 10 +- src/pages/tables/Static.module.scss | 3 + src/pages/tables/Tables.js | 38 +++---- src/styles/_overrides.scss | 4 +- src/styles/_variables.scss | 2 +- yarn.lock | 19 +++- 17 files changed, 161 insertions(+), 109 deletions(-) create mode 100644 src/pages/buttons/Buttons.module.scss diff --git a/changelog.md b/changelog.md index ed74cdd2..f9f9e4e1 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,14 @@ # Changelog +## [1.4.2] + +### Updated +- Added widget to icons on page icons, +- Updated styling badge component +- Updated styling alerts on page Dashboard +- Add styling to component sidebar, layout, buttons + + ## [1.4.1] ### Updated diff --git a/package.json b/package.json index be6558e5..8d047e39 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "react-router-dom": "^5.2.0", "react-sparklines": "^1.7.0", "react-toastify": "^5.4.1", - "reactstrap": "^8.6.0", + "reactstrap": "^8.9.0", "recharts": "^1.8.5", "redux": "^4.0.4", "redux-thunk": "^2.3.0", diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 2b2165f2..5ffa8430 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -68,7 +68,7 @@ class Header extends React.Component { - + diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss index 48d8b62b..f0475d96 100644 --- a/src/components/Layout/Layout.module.scss +++ b/src/components/Layout/Layout.module.scss @@ -28,5 +28,5 @@ min-height: 100%; // 20px for footer height padding: #{$navbar-height + $content-padding-vertical} $content-padding-horizontal ($content-padding-vertical + 20px); - background-color: $body-bg; + background-color: #F3F3F3; } diff --git a/src/components/Sidebar/LinksGroup/LinksGroup.module.scss b/src/components/Sidebar/LinksGroup/LinksGroup.module.scss index 0e022ff1..871a9c5c 100644 --- a/src/components/Sidebar/LinksGroup/LinksGroup.module.scss +++ b/src/components/Sidebar/LinksGroup/LinksGroup.module.scss @@ -17,13 +17,14 @@ > a { position: relative; - padding: 0 15px; + padding: 15px; line-height: 55px; justify-content: space-between; &:hover { font-weight: $font-weight-thin; - background-color: $gray-100; + //background-color: $gray-100; + background: #F3F3F3; } img { @@ -55,7 +56,8 @@ box-shadow: none; margin: 0; border-radius: 0; - background: rgba(#000, 0.1); + background: #F3F3F3; + //background: rgba(#000, 0.1); div { padding: 0; diff --git a/src/components/Widget/Widget.module.scss b/src/components/Widget/Widget.module.scss index a53d0826..82cbe3be 100644 --- a/src/components/Widget/Widget.module.scss +++ b/src/components/Widget/Widget.module.scss @@ -4,7 +4,8 @@ display: block; position: relative; margin-bottom: 30px; - padding: $widget-padding-y $widget-padding-x; + //padding: $widget-padding-y $widget-padding-x; + padding: $widget-padding; background: $widget-bg; } diff --git a/src/pages/buttons/Buttons.js b/src/pages/buttons/Buttons.js index dbaa80f8..5599f8cf 100644 --- a/src/pages/buttons/Buttons.js +++ b/src/pages/buttons/Buttons.js @@ -12,6 +12,7 @@ import { } from 'reactstrap'; import Widget from '../../components/Widget'; +import s from './Buttons.module.scss'; class Buttons extends React.Component { constructor(props) { @@ -114,14 +115,14 @@ class Buttons extends React.Component { Semantically distinguishable beauty.
- Default - Primary - Info - Success - Warning - Danger - Gray - Inverse + Default + Primary + Info + Success + Warning + Danger + Gray + Inverse
- Large button - Default button - Small button - Tiny button + Large button + Default button + Small button + Tiny button
.btn-rounded
.btn-rounded-f
<Button>
disabled
- Primary button - Button + Primary button + Button
- Primary Link - Link + Primary Link + Link
ButtonGroup
Different types of notifications for lost of use cases. Custom classes are also supported.
Info + Info Message - Error + Error + Retry Message - Success - Message + + Success Message diff --git a/src/pages/tables/Static.module.scss b/src/pages/tables/Static.module.scss index e7c7c5ac..4a030255 100644 --- a/src/pages/tables/Static.module.scss +++ b/src/pages/tables/Static.module.scss @@ -1,5 +1,8 @@ @import '../../styles/app'; +.Badge { + padding: 8px 16px; +} .mainTable { td, thead { diff --git a/src/pages/tables/Tables.js b/src/pages/tables/Tables.js index 5acab7d1..6e7cd48d 100644 --- a/src/pages/tables/Tables.js +++ b/src/pages/tables/Tables.js @@ -191,7 +191,7 @@ class Tables extends Component { {row.description} {row.label && - {row.label.text} + {row.label.text} } @@ -284,7 +284,7 @@ class Tables extends Component { Mark Otto - Online + Online @@ -296,9 +296,9 @@ class Tables extends Component { - Jacob ALERT! + Jacob ALERT! Thornton - Away + Away @@ -312,7 +312,7 @@ class Tables extends Component { Larry the Bird - Construct + Construct @@ -337,28 +337,28 @@ class Tables extends Component { Mark Otto ottoto@example.com - Pending + Pending 2 Jacob Thornton fat.thor@example.com - Unconfirmed + Unconfirmed 3 Larry the Bird larry@example.com - New + New 4 Peter Horadnia peter@example.com - Active + Active {/* eslint-enable */} @@ -406,7 +406,7 @@ class Tables extends Component { $25 224.2 - + @@ -424,7 +424,7 @@ class Tables extends Component { $87 346.1 - + @@ -442,7 +442,7 @@ class Tables extends Component { $57 944.6 - + @@ -460,7 +460,7 @@ class Tables extends Component { $118 533.1 - + @@ -478,7 +478,7 @@ class Tables extends Component { $72 854.5 - + @@ -528,7 +528,7 @@ class Tables extends Component { $25 224.2 - + @@ -546,7 +546,7 @@ class Tables extends Component { $87 346.1 - + @@ -564,7 +564,7 @@ class Tables extends Component { $57 944.6 - + @@ -582,7 +582,7 @@ class Tables extends Component { $118 533.1 - + @@ -600,7 +600,7 @@ class Tables extends Component { $72 854.5 - + diff --git a/src/styles/_overrides.scss b/src/styles/_overrides.scss index db78ae8a..b9837648 100644 --- a/src/styles/_overrides.scss +++ b/src/styles/_overrides.scss @@ -128,7 +128,9 @@ .badge { font-size: 12px; - + &.badge-pill { + border-radius: 10rem; + } .list-group-item > & { margin-top: 2px; } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 8155fd58..b0bafda1 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -156,6 +156,7 @@ $widget-title-color: #444; $widget-padding-y: 15px; $widget-padding-x: 20px; + $widget-padding: 24px; $btn-inverse-color: #fff; $btn-inverse-bg: $gray-700; @@ -164,4 +165,3 @@ $input-height-small: 2rem; $enable-rounded: false; - \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 0761af32..1848d92d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1772,13 +1772,20 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.9.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f" integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ== dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.5": + version "7.14.8" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446" + integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278" @@ -10228,12 +10235,12 @@ react@^16.11.0: object-assign "^4.1.1" prop-types "^15.6.2" -reactstrap@^8.6.0: - version "8.6.0" - resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.6.0.tgz#baee0d12990c9fef3c82199fb05e84d9f0af1a26" - integrity sha512-03/UMbLPR6MhVStVUfCLuKh8xh4JOtNVkRxDB9/uHixN+cEQPOpSYa0K69YyK1/2YdZBs2qS6y0cQkK8NQKBHA== +reactstrap@^8.9.0: + version "8.9.0" + resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.9.0.tgz#bca4afa3f5cd18899ef9b33d877a141886d5abae" + integrity sha512-pmf33YjpNZk1IfrjqpWCUMq9hk6GzSnMWBAofTBNIRJQB1zQ0Au2kzv3lPUAFsBYgWEuI9iYa/xKXHaboSiMkQ== dependencies: - "@babel/runtime" "^7.2.0" + "@babel/runtime" "^7.12.5" classnames "^2.2.3" prop-types "^15.5.8" react-popper "^1.3.6" From 6cc40d5982886c81f95fed28511d5a1df546d89c Mon Sep 17 00:00:00 2001 From: Yeliazar Date: Wed, 6 Oct 2021 16:22:14 +0300 Subject: [PATCH 2/2] updated dependencies, fixed proxy error posts data, fixed login error --- changelog.md | 67 + package.json | 122 +- server/server.js | 18 +- src/actions/user.js | 122 +- src/components/App.js | 2 +- src/components/Header/Header.js | 6 +- src/config.js | 8 +- src/pages/login/Login.js | 16 +- src/pages/posts/list/PostList.js | 10 +- src/reducers/auth.js | 12 +- yarn.lock | 3743 ++++++++++++++++++------------ 11 files changed, 2528 insertions(+), 1598 deletions(-) diff --git a/changelog.md b/changelog.md index f9f9e4e1..c9a6acfc 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,72 @@ # Changelog +## [1.4.3] + +### Updated +- Updated login page +- Fixed proxy error posts data +###Updated follow dependencies and devDependencies + "dependencies": + "@babel/core": "^7.11.6" -> "^7.15.5", + "@babel/plugin-transform-runtime": "^7.11.5" -> "^7.15.0", + "@svgr/webpack": "4.3.2" -> "4.3.3", + "axios": "^0.19.0" -> "^0.21.4", + "babel-eslint": "10.0.3" -> "10.1.0", + "babel-loader": "8.0.6" -> "8.2.2", + "babel-plugin-named-asset-import": "^0.3.4" -> "^0.3.7", + "babel-preset-react-app": "^9.0.2" -> "^9.1.2", + "bootstrap": "^4.5.2" -> "^4.6.0", + "camelcase": "^5.2.0" -> "^5.3.1", + "case-sensitive-paths-webpack-plugin": "2.2.0" -> "2.4.0", + "classnames": "^2.2.6" -> "^2.3.1", + "cookie-parser": "^1.4.4" -> "^1.4.5", + "dotenv": "^8.2.0" -> "^8.6.0", + "eslint": "^6.1.0" -> "^6.8.0", + "eslint-config-react-app": "^5.0.2" -> "^5.2.1", + "eslint-plugin-import": "2.18.2" -> "2.24.2", + "eslint-plugin-jsx-a11y": "6.2.3" -> "6.4.1", + "eslint-plugin-react": "7.14.3" -> "7.25.1", + "eslint-plugin-react-hooks": "^1.6.1" -> "^1.7.0", + "express-graphql": "^0.9.0" -> "^0.12.0", + "express-jwt": "^5.3.1" -> "^5.3.3", + "graphql-relay": "^0.6.0" -> "^0.9.0", + "graphql-sequelize": "^9.3.6" -> "^9.4.3", + "html-webpack-plugin": "4.0.0-beta.5" -> "4.5.2", + "mini-css-extract-plugin": "0.8.0" -> "0.12.0", + "mysql2": "^2.2.5" -> "^2.3.0", + "optimize-css-assets-webpack-plugin": "5.0.3" -> "5.0.8", + "pnp-webpack-plugin": "1.5.0" -> "1.7.0", + "postcss-flexbugs-fixes": "4.1.0" -> "4.2.1", + "postcss-safe-parser": "4.0.1" -> "4.0.2" , + "react": "^16.11.0" -> "^16.14.0" , + "react-app-polyfill": "^1.0.4" -> "^1.0.6", + "react-dom": "^16.11.0" -> "^16.14.0", + "react-router": "^5.2.0" -> "^5.2.1", + "react-router-dom": "^5.2.0" -> "^5.3.0", + "react-toastify": "^5.4.1" -> "^5.5.0", + "reactstrap": "^8.9.0" -> "^8.10.0", + "redux": "^4.0.4" -> "^4.1.1" , + "resolve": "1.12.0" -> "1.20.0", + "resolve-url-loader": "2" -> "2.3.2", + "sass-loader": "7.2.0" -> "7.3.1", + "sequelize": "^5.22.3" -> "^5.22.4", + "sqlite3": "^4.1.0" -> "^4.2.0", + "style-loader": "1.0.0" -> "1.3.0", + "terser-webpack-plugin": "1.4.1" -> "1.4.5", + "ts-pnp": "1.1.4" -> "1.2.0" , + "url-loader": "2.1.0" -> "2.3.0", + "webpack": "4.41.0" -> "4.46.0", + "webpack-dev-server": "3.2.1" -> "3.11.2", + "webpack-manifest-plugin": "2.1.1" -> "2.2.0", + + "devDependencies": + "@babel/cli": "^7.11.6" -> "^7.15.4", + "@babel/node": "^7.10.5" -> "^7.15.4", + "@babel/plugin-proposal-class-properties": "^7.10.4" -> "^7.14.5", + "@babel/plugin-proposal-optional-chaining": "^7.11.0" -> "^7.14.5", + "@babel/polyfill": "^7.11.5" -> "^7.12.1", + "@babel/preset-env": "^7.11.5" -> "^7.15.6", + ## [1.4.2] ### Updated diff --git a/package.json b/package.json index 8d047e39..ae7f8b37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-dashboard-new", - "version": "0.1.0", + "version": "1.4.3", "private": true, "resolutions": { "minimist": "^1.2.2", @@ -10,100 +10,102 @@ "websocket-extensions": "^0.1.4" }, "dependencies": { - "@babel/core": "^7.11.6", - "@babel/plugin-transform-runtime": "^7.11.5", - "@svgr/webpack": "4.3.2", + "@babel/core": "^7.15.5", + "@babel/plugin-transform-runtime": "^7.15.0", + "@babel/register": "^7.15.3", + "@svgr/webpack": "4.3.3", "@typescript-eslint/eslint-plugin": "^2.34.0", "@typescript-eslint/parser": "^2.34.0", "awesome-bootstrap-checkbox": "^1.0.1", - "axios": "^0.19.0", - "babel-eslint": "10.0.3", + "axios": "^0.21.4", + "babel-eslint": "10.1.0", "babel-jest": "^24.9.0", - "babel-loader": "8.0.6", - "babel-plugin-named-asset-import": "^0.3.4", - "babel-preset-react-app": "^9.0.2", - "bootstrap": "^4.5.2", - "camelcase": "^5.2.0", - "case-sensitive-paths-webpack-plugin": "2.2.0", - "classnames": "^2.2.6", - "cookie-parser": "^1.4.4", + "babel-loader": "8.2.2", + "babel-plugin-named-asset-import": "^0.3.7", + "babel-preset-react-app": "^9.1.2", + "bootstrap": "^4.6.0", + "camelcase": "^5.3.1", + "case-sensitive-paths-webpack-plugin": "2.4.0", + "classnames": "^2.3.1", + "cookie-parser": "^1.4.5", "css-loader": "2.1.1", - "dotenv": "^8.2.0", + "dotenv": "^8.6.0", "dotenv-expand": "5.1.0", - "eslint": "^6.1.0", - "eslint-config-react-app": "^5.0.2", + "eslint": "^6.8.0", + "eslint-config-react-app": "^5.2.1", "eslint-loader": "3.0.2", "eslint-plugin-flowtype": "3.13.0", - "eslint-plugin-import": "2.18.2", - "eslint-plugin-jsx-a11y": "6.2.3", - "eslint-plugin-react": "7.14.3", - "eslint-plugin-react-hooks": "^1.6.1", - "express-graphql": "^0.9.0", - "express-jwt": "^5.3.1", + "eslint-plugin-import": "2.24.2", + "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-react": "7.25.1", + "eslint-plugin-react-hooks": "^1.7.0", + "express": "^4.17.1", + "express-graphql": "^0.12.0", + "express-jwt": "^5.3.3", "file-loader": "3.0.1", "font-awesome": "^4.7.0", "fs-extra": "7.0.1", "glyphicons-halflings": "^1.9.1", "graphql": "^14.7.0", - "graphql-relay": "^0.6.0", - "graphql-sequelize": "^9.3.6", + "graphql-relay": "^0.9.0", + "graphql-sequelize": "^9.4.3", "helmet": "^3.23.3", - "html-webpack-plugin": "4.0.0-beta.5", + "html-webpack-plugin": "4.5.2", "identity-obj-proxy": "3.0.0", "is-wsl": "^1.1.0", "jest": "24.9.0", "jest-environment-jsdom-fourteen": "0.1.0", "jest-resolve": "24.9.0", - "jest-watch-typeahead": "0.4.0", + "jest-watch-typeahead": "0.6.4", "jsonwebtoken": "^8.5.1", - "mini-css-extract-plugin": "0.8.0", - "mysql2": "^2.2.5", + "mini-css-extract-plugin": "0.12.0", + "mysql2": "^2.3.0", "node-sass": "^4.14.1", "normalize.css": "^8.0.1", "npm-run-all": "^4.1.5", - "optimize-css-assets-webpack-plugin": "5.0.3", - "pnp-webpack-plugin": "1.5.0", - "postcss-flexbugs-fixes": "4.1.0", + "optimize-css-assets-webpack-plugin": "5.0.8", + "pnp-webpack-plugin": "1.7.0", + "postcss-flexbugs-fixes": "4.2.1", "postcss-loader": "3.0.0", "postcss-normalize": "7.0.1", "postcss-preset-env": "6.7.0", - "postcss-safe-parser": "4.0.1", + "postcss-safe-parser": "4.0.2", "prop-types": "^15.7.2", - "react": "^16.11.0", - "react-app-polyfill": "^1.0.4", + "react": "^16.14.0", + "react-app-polyfill": "^1.0.6", "react-dev-utils": "^9.1.0", - "react-dom": "^16.11.0", + "react-dom": "^16.14.0", "react-google-maps": "^9.4.5", "react-redux": "^7.2.1", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0", + "react-router": "^5.2.1", + "react-router-dom": "^5.3.0", "react-sparklines": "^1.7.0", - "react-toastify": "^5.4.1", - "reactstrap": "^8.9.0", + "react-toastify": "^5.5.0", + "reactstrap": "^8.10.0", "recharts": "^1.8.5", - "redux": "^4.0.4", + "redux": "^4.1.1", "redux-thunk": "^2.3.0", - "resolve": "1.12.0", - "resolve-url-loader": "2", - "sass-loader": "7.2.0", + "resolve": "1.20.0", + "resolve-url-loader": "2.3.2", + "sass-loader": "7.3.1", "semver": "6.3.0", - "sequelize": "^5.22.3", - "sqlite3": "^4.1.0", - "style-loader": "1.0.0", - "terser-webpack-plugin": "1.4.1", - "ts-pnp": "1.1.4", - "url-loader": "2.1.0", + "sequelize": "^5.22.4", + "sqlite3": "^4.2.0", + "style-loader": "1.3.0", + "terser-webpack-plugin": "1.4.5", + "ts-pnp": "1.2.0", + "url-loader": "2.3.0", "uuid": "^3.3.3", - "webpack": "4.41.0", - "webpack-dev-server": "3.2.1", - "webpack-manifest-plugin": "2.1.1", + "webpack": "4.46.0", + "webpack-dev-server": "3.11.2", + "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugin": "4.3.1" }, "scripts": { "start": "node scripts/start.js", "build": "cross-env PUBLIC_URL='/react-dashboard' node scripts/build.js", "test": "node scripts/test.js", - "server": "node server/start.js", + "server": "cross-env NODE_ENV=production node server/start.js", "dev": "cross-env NODE_ENV=development run-p server start" }, "proxy": "http://localhost:5000", @@ -176,12 +178,12 @@ ] }, "devDependencies": { - "@babel/cli": "^7.11.6", - "@babel/node": "^7.10.5", - "@babel/plugin-proposal-class-properties": "^7.10.4", - "@babel/plugin-proposal-optional-chaining": "^7.11.0", - "@babel/polyfill": "^7.11.5", - "@babel/preset-env": "^7.11.5", + "@babel/cli": "^7.15.4", + "@babel/node": "^7.15.4", + "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/plugin-proposal-optional-chaining": "^7.14.5", + "@babel/polyfill": "^7.12.1", + "@babel/preset-env": "^7.15.6", "cross-env": "^6.0.3" } } diff --git a/server/server.js b/server/server.js index a512325d..92503dae 100644 --- a/server/server.js +++ b/server/server.js @@ -1,9 +1,9 @@ -import express from 'express' +import express from 'express'; import helmet from 'helmet'; import jwt from 'jsonwebtoken'; import cookieParser from 'cookie-parser'; import expressJwt from 'express-jwt'; -import expressGraphQL from 'express-graphql'; +import {graphqlHTTP} from 'express-graphql'; import schema from '../src/data/schema' import dotenv from 'dotenv'; import config from './config'; @@ -49,11 +49,11 @@ app.post('/login', (req, res) => { app.use( '/graphql', - expressJwt({ - secret: config.auth.jwt.secret, - getToken: req => req.cookies.id_token, - }), - expressGraphQL(req => ({ + // expressJwt({ + // //secret: config.auth.jwt.secret, + // getToken: req => req.cookies.id_token, + // }), + graphqlHTTP(req => ({ schema, graphiql: process.env.REACT_APP_NODE_ENV, rootValue: { request: req }, @@ -65,8 +65,8 @@ const PORT = process.env.REACT_APP_PORT || 5000; const server = app.listen(PORT, console.log(`Server running in ${process.env.REACT_APP_NODE_ENV} mode on port ${PORT}`)) -process.on('unhandledRejection', (err, promise) => { +process.on('unhandledRejection', (err) => { console.log(`Unhandled Rejection: ${err.message}`) // Close server server.close(() => process.exit(1)) -}) \ No newline at end of file +}) diff --git a/src/actions/user.js b/src/actions/user.js index 1c39466c..2cc54bce 100644 --- a/src/actions/user.js +++ b/src/actions/user.js @@ -1,97 +1,103 @@ -import appConfig from '../config'; +//import appConfig from '../config'; -export const LOGIN_REQUEST = 'LOGIN_REQUEST'; +//export const LOGIN_REQUEST = 'LOGIN_REQUEST'; export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'; export const LOGIN_FAILURE = 'LOGIN_FAILURE'; export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'; export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'; -export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'; +//export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'; -function requestLogin(creds) { - return { - type: LOGIN_REQUEST, - isFetching: true, - isAuthenticated: false, - creds, - }; -} +// function requestLogin(creds) { +// return { +// type: LOGIN_REQUEST, +// isFetching: true, +// isAuthenticated: false, +// creds, +// }; +// } -export function receiveLogin(user) { +export function receiveLogin() { return { - type: LOGIN_SUCCESS, - isFetching: false, - isAuthenticated: true, - id_token: user.id_token, + type: LOGIN_SUCCESS + // isFetching: false, + // isAuthenticated: true, + //id_token: user.id_token, }; } -function loginError(message) { +function loginError(payload) { return { type: LOGIN_FAILURE, - isFetching: false, - isAuthenticated: false, - message, + // isFetching: false, + // isAuthenticated: false, + payload, }; } function requestLogout() { return { type: LOGOUT_REQUEST, - isFetching: true, - isAuthenticated: true, + // isFetching: true, + // isAuthenticated: true, }; } export function receiveLogout() { return { type: LOGOUT_SUCCESS, - isFetching: false, - isAuthenticated: false, + // isFetching: false, + // isAuthenticated: false, }; } // Logs the user out export function logoutUser() { - return dispatch => { + return (dispatch) => { dispatch(requestLogout()); - localStorage.removeItem('id_token'); - document.cookie = 'id_token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; + localStorage.removeItem('authenticated'); + //document.cookie = 'id_token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; dispatch(receiveLogout()); }; } export function loginUser(creds) { - const config = { - method: 'POST', - headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - credentials: 'include', - body: `login=${creds.login}&password=${creds.password}`, - }; - - return dispatch => { + // const config = { + // method: 'POST', + // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + // credentials: 'include', + // body: `login=${creds.login}&password=${creds.password}`, + // }; + + return (dispatch) => { // We dispatch requestLogin to kickoff the call to the API - dispatch(requestLogin(creds)); - if(process.env.NODE_ENV === "development") { - return fetch('/login', config) - .then(response => response.json().then(user => ({ user, response }))) - .then(({ user, response }) => { - if (!response.ok) { - // If there was a problem, we want to - // dispatch the error condition - dispatch(loginError(user.message)); - return Promise.reject(user); - } - // in posts create new action and check http status, if malign logout - // If login was successful, set the token in local storage - localStorage.setItem('id_token', user.id_token); - // Dispatch the success action - dispatch(receiveLogin(user)); - return Promise.resolve(user); - }) - .catch(err => console.error('Error: ', err)); - } else { - localStorage.setItem('id_token', appConfig.id_token); - dispatch(receiveLogin({id_token: appConfig.id_token})) - } + dispatch(receiveLogin()); + //if (process.env.NODE_ENV === "development") { + if (creds.login.length > 0 && creds.password.length > 0) { + localStorage.setItem('authenticated', true) + } else { + dispatch(loginError('Something was wrong. Try again')); + } + //} }; } + // return fetch('/login', config) + // .then(response => response.json().then(user => ({ user, response }))) + // .then(({ user, response }) => { + // if (!response.ok) { + // // If there was a problem, we want to + // // dispatch the error condition + // dispatch(loginError(user.message)); + // return Promise.reject(user); + // } + // // in posts create new action and check http status, if malign logout + // // If login was successful, set the token in local storage + // localStorage.setItem('id_token', user.id_token); + // // Dispatch the success action + // dispatch(receiveLogin(user)); + // return Promise.resolve(user); + // }) + // .catch(err => console.error('Error: ', err)); + // } else { + // localStorage.setItem('id_token', appConfig.id_token); + // dispatch(receiveLogin({id_token: appConfig.id_token})) + // } diff --git a/src/components/App.js b/src/components/App.js index b519154d..3c5eb888 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -14,7 +14,7 @@ import Register from '../pages/register'; import { logoutUser } from '../actions/user'; const PrivateRoute = ({dispatch, component, ...rest }) => { - if (!Login.isAuthenticated(localStorage.getItem('id_token'))) { + if (!Login.isAuthenticated(JSON.parse(localStorage.getItem('authenticated')))) { dispatch(logoutUser()); return () } else { diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 5ffa8430..2373afbf 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -15,6 +15,7 @@ import { Navbar, Nav, NavItem, + NavLink, Button, Dropdown, DropdownToggle, @@ -24,7 +25,6 @@ import { InputGroup, InputGroupAddon, } from 'reactstrap'; -import { NavLink } from 'react-router-dom'; import Icon from '../Icon'; @@ -106,8 +106,8 @@ class Header extends React.Component { Profile - - Logout + + Logout diff --git a/src/config.js b/src/config.js index 27cbf749..2d7f646c 100644 --- a/src/config.js +++ b/src/config.js @@ -1,4 +1,8 @@ export default { isBackend: process.env.REACT_APP_BACKEND, - id_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjpmYWxzZSwibG9naW4iOiJ1c2VyIiwiaWF0IjoxNTczNzQ4ODI1LCJleHAiOjE2MjA0MDQ4MjV9.Jd1Trqu6izHq2R3uw4enrDlQKG4mzZdipSMdYQD_9JM' -}; \ No newline at end of file + id_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjpmYWxzZSwibG9naW4iOiJ1c2VyIiwiaWF0IjoxNTczNzQ4ODI1LCJleHAiOjE2MjA0MDQ4MjV9.Jd1Trqu6izHq2R3uw4enrDlQKG4mzZdipSMdYQD_9JM', + auth: { + login: 'user', + password: 'password' + } +}; diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index fd76902b..85bf69cd 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -15,8 +15,6 @@ import s from './Login.module.scss'; import Widget from '../../components/Widget'; import Footer from "../../components/Footer"; import { loginUser } from '../../actions/user'; -import jwt from 'jsonwebtoken'; -import config from '../../config' class Login extends React.Component { static propTypes = { @@ -35,12 +33,7 @@ class Login extends React.Component { }; static isAuthenticated(token) { - // We check if app runs with backend mode - if (!config.isBackend && token) return true; - if (!token) return; - const date = new Date().getTime() / 1000; - const data = jwt.decode(token); - return date < data.exp; + if (token) return true; } constructor(props) { @@ -71,12 +64,9 @@ class Login extends React.Component { } render() { - const {from} = this.props.location.state || { - from: {pathname: '/app'}, - }; + const {from} = this.props.location.state || {from: {pathname: '/app'}}; - if (this.props.isAuthenticated) { - // cant access login page while logged in + if (Login.isAuthenticated(JSON.parse(localStorage.getItem('authenticated')))) { return ; } diff --git a/src/pages/posts/list/PostList.js b/src/pages/posts/list/PostList.js index c6329cdb..86f36dbf 100644 --- a/src/pages/posts/list/PostList.js +++ b/src/pages/posts/list/PostList.js @@ -91,11 +91,11 @@ class PostList extends React.Component { )) )} - {this.props.isFetching && ( - - Loading... - - )} + {/*{this.props.isFetching && (*/} + {/* */} + {/* Loading...*/} + {/* */} + {/*)}*/}
Info Message
Error + Error + Retry Message - Success - Message + + Success Message diff --git a/src/pages/tables/Static.module.scss b/src/pages/tables/Static.module.scss index e7c7c5ac..4a030255 100644 --- a/src/pages/tables/Static.module.scss +++ b/src/pages/tables/Static.module.scss @@ -1,5 +1,8 @@ @import '../../styles/app'; +.Badge { + padding: 8px 16px; +} .mainTable { td, thead { diff --git a/src/pages/tables/Tables.js b/src/pages/tables/Tables.js index 5acab7d1..6e7cd48d 100644 --- a/src/pages/tables/Tables.js +++ b/src/pages/tables/Tables.js @@ -191,7 +191,7 @@ class Tables extends Component { {row.description} {row.label && - {row.label.text} + {row.label.text} } @@ -284,7 +284,7 @@ class Tables extends Component { Mark Otto - Online + Online @@ -296,9 +296,9 @@ class Tables extends Component { - Jacob ALERT! + Jacob ALERT! Thornton - Away + Away @@ -312,7 +312,7 @@ class Tables extends Component { Larry the Bird - Construct + Construct @@ -337,28 +337,28 @@ class Tables extends Component { Mark Otto ottoto@example.com - Pending + Pending 2 Jacob Thornton fat.thor@example.com - Unconfirmed + Unconfirmed 3 Larry the Bird larry@example.com - New + New 4 Peter Horadnia peter@example.com - Active + Active {/* eslint-enable */} @@ -406,7 +406,7 @@ class Tables extends Component { $25 224.2 - + @@ -424,7 +424,7 @@ class Tables extends Component { $87 346.1 - + @@ -442,7 +442,7 @@ class Tables extends Component { $57 944.6 - + @@ -460,7 +460,7 @@ class Tables extends Component { $118 533.1 - + @@ -478,7 +478,7 @@ class Tables extends Component { $72 854.5 - + @@ -528,7 +528,7 @@ class Tables extends Component { $25 224.2 - + @@ -546,7 +546,7 @@ class Tables extends Component { $87 346.1 - + @@ -564,7 +564,7 @@ class Tables extends Component { $57 944.6 - + @@ -582,7 +582,7 @@ class Tables extends Component { $118 533.1 - + @@ -600,7 +600,7 @@ class Tables extends Component { $72 854.5 - + diff --git a/src/styles/_overrides.scss b/src/styles/_overrides.scss index db78ae8a..b9837648 100644 --- a/src/styles/_overrides.scss +++ b/src/styles/_overrides.scss @@ -128,7 +128,9 @@ .badge { font-size: 12px; - + &.badge-pill { + border-radius: 10rem; + } .list-group-item > & { margin-top: 2px; } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 8155fd58..b0bafda1 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -156,6 +156,7 @@ $widget-title-color: #444; $widget-padding-y: 15px; $widget-padding-x: 20px; + $widget-padding: 24px; $btn-inverse-color: #fff; $btn-inverse-bg: $gray-700; @@ -164,4 +165,3 @@ $input-height-small: 2rem; $enable-rounded: false; - \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 0761af32..1848d92d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1772,13 +1772,20 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.9.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f" integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ== dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.5": + version "7.14.8" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446" + integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278" @@ -10228,12 +10235,12 @@ react@^16.11.0: object-assign "^4.1.1" prop-types "^15.6.2" -reactstrap@^8.6.0: - version "8.6.0" - resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.6.0.tgz#baee0d12990c9fef3c82199fb05e84d9f0af1a26" - integrity sha512-03/UMbLPR6MhVStVUfCLuKh8xh4JOtNVkRxDB9/uHixN+cEQPOpSYa0K69YyK1/2YdZBs2qS6y0cQkK8NQKBHA== +reactstrap@^8.9.0: + version "8.9.0" + resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.9.0.tgz#bca4afa3f5cd18899ef9b33d877a141886d5abae" + integrity sha512-pmf33YjpNZk1IfrjqpWCUMq9hk6GzSnMWBAofTBNIRJQB1zQ0Au2kzv3lPUAFsBYgWEuI9iYa/xKXHaboSiMkQ== dependencies: - "@babel/runtime" "^7.2.0" + "@babel/runtime" "^7.12.5" classnames "^2.2.3" prop-types "^15.5.8" react-popper "^1.3.6" From 6cc40d5982886c81f95fed28511d5a1df546d89c Mon Sep 17 00:00:00 2001 From: Yeliazar Date: Wed, 6 Oct 2021 16:22:14 +0300 Subject: [PATCH 2/2] updated dependencies, fixed proxy error posts data, fixed login error --- changelog.md | 67 + package.json | 122 +- server/server.js | 18 +- src/actions/user.js | 122 +- src/components/App.js | 2 +- src/components/Header/Header.js | 6 +- src/config.js | 8 +- src/pages/login/Login.js | 16 +- src/pages/posts/list/PostList.js | 10 +- src/reducers/auth.js | 12 +- yarn.lock | 3743 ++++++++++++++++++------------ 11 files changed, 2528 insertions(+), 1598 deletions(-) diff --git a/changelog.md b/changelog.md index f9f9e4e1..c9a6acfc 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,72 @@ # Changelog +## [1.4.3] + +### Updated +- Updated login page +- Fixed proxy error posts data +###Updated follow dependencies and devDependencies + "dependencies": + "@babel/core": "^7.11.6" -> "^7.15.5", + "@babel/plugin-transform-runtime": "^7.11.5" -> "^7.15.0", + "@svgr/webpack": "4.3.2" -> "4.3.3", + "axios": "^0.19.0" -> "^0.21.4", + "babel-eslint": "10.0.3" -> "10.1.0", + "babel-loader": "8.0.6" -> "8.2.2", + "babel-plugin-named-asset-import": "^0.3.4" -> "^0.3.7", + "babel-preset-react-app": "^9.0.2" -> "^9.1.2", + "bootstrap": "^4.5.2" -> "^4.6.0", + "camelcase": "^5.2.0" -> "^5.3.1", + "case-sensitive-paths-webpack-plugin": "2.2.0" -> "2.4.0", + "classnames": "^2.2.6" -> "^2.3.1", + "cookie-parser": "^1.4.4" -> "^1.4.5", + "dotenv": "^8.2.0" -> "^8.6.0", + "eslint": "^6.1.0" -> "^6.8.0", + "eslint-config-react-app": "^5.0.2" -> "^5.2.1", + "eslint-plugin-import": "2.18.2" -> "2.24.2", + "eslint-plugin-jsx-a11y": "6.2.3" -> "6.4.1", + "eslint-plugin-react": "7.14.3" -> "7.25.1", + "eslint-plugin-react-hooks": "^1.6.1" -> "^1.7.0", + "express-graphql": "^0.9.0" -> "^0.12.0", + "express-jwt": "^5.3.1" -> "^5.3.3", + "graphql-relay": "^0.6.0" -> "^0.9.0", + "graphql-sequelize": "^9.3.6" -> "^9.4.3", + "html-webpack-plugin": "4.0.0-beta.5" -> "4.5.2", + "mini-css-extract-plugin": "0.8.0" -> "0.12.0", + "mysql2": "^2.2.5" -> "^2.3.0", + "optimize-css-assets-webpack-plugin": "5.0.3" -> "5.0.8", + "pnp-webpack-plugin": "1.5.0" -> "1.7.0", + "postcss-flexbugs-fixes": "4.1.0" -> "4.2.1", + "postcss-safe-parser": "4.0.1" -> "4.0.2" , + "react": "^16.11.0" -> "^16.14.0" , + "react-app-polyfill": "^1.0.4" -> "^1.0.6", + "react-dom": "^16.11.0" -> "^16.14.0", + "react-router": "^5.2.0" -> "^5.2.1", + "react-router-dom": "^5.2.0" -> "^5.3.0", + "react-toastify": "^5.4.1" -> "^5.5.0", + "reactstrap": "^8.9.0" -> "^8.10.0", + "redux": "^4.0.4" -> "^4.1.1" , + "resolve": "1.12.0" -> "1.20.0", + "resolve-url-loader": "2" -> "2.3.2", + "sass-loader": "7.2.0" -> "7.3.1", + "sequelize": "^5.22.3" -> "^5.22.4", + "sqlite3": "^4.1.0" -> "^4.2.0", + "style-loader": "1.0.0" -> "1.3.0", + "terser-webpack-plugin": "1.4.1" -> "1.4.5", + "ts-pnp": "1.1.4" -> "1.2.0" , + "url-loader": "2.1.0" -> "2.3.0", + "webpack": "4.41.0" -> "4.46.0", + "webpack-dev-server": "3.2.1" -> "3.11.2", + "webpack-manifest-plugin": "2.1.1" -> "2.2.0", + + "devDependencies": + "@babel/cli": "^7.11.6" -> "^7.15.4", + "@babel/node": "^7.10.5" -> "^7.15.4", + "@babel/plugin-proposal-class-properties": "^7.10.4" -> "^7.14.5", + "@babel/plugin-proposal-optional-chaining": "^7.11.0" -> "^7.14.5", + "@babel/polyfill": "^7.11.5" -> "^7.12.1", + "@babel/preset-env": "^7.11.5" -> "^7.15.6", + ## [1.4.2] ### Updated diff --git a/package.json b/package.json index 8d047e39..ae7f8b37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-dashboard-new", - "version": "0.1.0", + "version": "1.4.3", "private": true, "resolutions": { "minimist": "^1.2.2", @@ -10,100 +10,102 @@ "websocket-extensions": "^0.1.4" }, "dependencies": { - "@babel/core": "^7.11.6", - "@babel/plugin-transform-runtime": "^7.11.5", - "@svgr/webpack": "4.3.2", + "@babel/core": "^7.15.5", + "@babel/plugin-transform-runtime": "^7.15.0", + "@babel/register": "^7.15.3", + "@svgr/webpack": "4.3.3", "@typescript-eslint/eslint-plugin": "^2.34.0", "@typescript-eslint/parser": "^2.34.0", "awesome-bootstrap-checkbox": "^1.0.1", - "axios": "^0.19.0", - "babel-eslint": "10.0.3", + "axios": "^0.21.4", + "babel-eslint": "10.1.0", "babel-jest": "^24.9.0", - "babel-loader": "8.0.6", - "babel-plugin-named-asset-import": "^0.3.4", - "babel-preset-react-app": "^9.0.2", - "bootstrap": "^4.5.2", - "camelcase": "^5.2.0", - "case-sensitive-paths-webpack-plugin": "2.2.0", - "classnames": "^2.2.6", - "cookie-parser": "^1.4.4", + "babel-loader": "8.2.2", + "babel-plugin-named-asset-import": "^0.3.7", + "babel-preset-react-app": "^9.1.2", + "bootstrap": "^4.6.0", + "camelcase": "^5.3.1", + "case-sensitive-paths-webpack-plugin": "2.4.0", + "classnames": "^2.3.1", + "cookie-parser": "^1.4.5", "css-loader": "2.1.1", - "dotenv": "^8.2.0", + "dotenv": "^8.6.0", "dotenv-expand": "5.1.0", - "eslint": "^6.1.0", - "eslint-config-react-app": "^5.0.2", + "eslint": "^6.8.0", + "eslint-config-react-app": "^5.2.1", "eslint-loader": "3.0.2", "eslint-plugin-flowtype": "3.13.0", - "eslint-plugin-import": "2.18.2", - "eslint-plugin-jsx-a11y": "6.2.3", - "eslint-plugin-react": "7.14.3", - "eslint-plugin-react-hooks": "^1.6.1", - "express-graphql": "^0.9.0", - "express-jwt": "^5.3.1", + "eslint-plugin-import": "2.24.2", + "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-react": "7.25.1", + "eslint-plugin-react-hooks": "^1.7.0", + "express": "^4.17.1", + "express-graphql": "^0.12.0", + "express-jwt": "^5.3.3", "file-loader": "3.0.1", "font-awesome": "^4.7.0", "fs-extra": "7.0.1", "glyphicons-halflings": "^1.9.1", "graphql": "^14.7.0", - "graphql-relay": "^0.6.0", - "graphql-sequelize": "^9.3.6", + "graphql-relay": "^0.9.0", + "graphql-sequelize": "^9.4.3", "helmet": "^3.23.3", - "html-webpack-plugin": "4.0.0-beta.5", + "html-webpack-plugin": "4.5.2", "identity-obj-proxy": "3.0.0", "is-wsl": "^1.1.0", "jest": "24.9.0", "jest-environment-jsdom-fourteen": "0.1.0", "jest-resolve": "24.9.0", - "jest-watch-typeahead": "0.4.0", + "jest-watch-typeahead": "0.6.4", "jsonwebtoken": "^8.5.1", - "mini-css-extract-plugin": "0.8.0", - "mysql2": "^2.2.5", + "mini-css-extract-plugin": "0.12.0", + "mysql2": "^2.3.0", "node-sass": "^4.14.1", "normalize.css": "^8.0.1", "npm-run-all": "^4.1.5", - "optimize-css-assets-webpack-plugin": "5.0.3", - "pnp-webpack-plugin": "1.5.0", - "postcss-flexbugs-fixes": "4.1.0", + "optimize-css-assets-webpack-plugin": "5.0.8", + "pnp-webpack-plugin": "1.7.0", + "postcss-flexbugs-fixes": "4.2.1", "postcss-loader": "3.0.0", "postcss-normalize": "7.0.1", "postcss-preset-env": "6.7.0", - "postcss-safe-parser": "4.0.1", + "postcss-safe-parser": "4.0.2", "prop-types": "^15.7.2", - "react": "^16.11.0", - "react-app-polyfill": "^1.0.4", + "react": "^16.14.0", + "react-app-polyfill": "^1.0.6", "react-dev-utils": "^9.1.0", - "react-dom": "^16.11.0", + "react-dom": "^16.14.0", "react-google-maps": "^9.4.5", "react-redux": "^7.2.1", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0", + "react-router": "^5.2.1", + "react-router-dom": "^5.3.0", "react-sparklines": "^1.7.0", - "react-toastify": "^5.4.1", - "reactstrap": "^8.9.0", + "react-toastify": "^5.5.0", + "reactstrap": "^8.10.0", "recharts": "^1.8.5", - "redux": "^4.0.4", + "redux": "^4.1.1", "redux-thunk": "^2.3.0", - "resolve": "1.12.0", - "resolve-url-loader": "2", - "sass-loader": "7.2.0", + "resolve": "1.20.0", + "resolve-url-loader": "2.3.2", + "sass-loader": "7.3.1", "semver": "6.3.0", - "sequelize": "^5.22.3", - "sqlite3": "^4.1.0", - "style-loader": "1.0.0", - "terser-webpack-plugin": "1.4.1", - "ts-pnp": "1.1.4", - "url-loader": "2.1.0", + "sequelize": "^5.22.4", + "sqlite3": "^4.2.0", + "style-loader": "1.3.0", + "terser-webpack-plugin": "1.4.5", + "ts-pnp": "1.2.0", + "url-loader": "2.3.0", "uuid": "^3.3.3", - "webpack": "4.41.0", - "webpack-dev-server": "3.2.1", - "webpack-manifest-plugin": "2.1.1", + "webpack": "4.46.0", + "webpack-dev-server": "3.11.2", + "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugin": "4.3.1" }, "scripts": { "start": "node scripts/start.js", "build": "cross-env PUBLIC_URL='/react-dashboard' node scripts/build.js", "test": "node scripts/test.js", - "server": "node server/start.js", + "server": "cross-env NODE_ENV=production node server/start.js", "dev": "cross-env NODE_ENV=development run-p server start" }, "proxy": "http://localhost:5000", @@ -176,12 +178,12 @@ ] }, "devDependencies": { - "@babel/cli": "^7.11.6", - "@babel/node": "^7.10.5", - "@babel/plugin-proposal-class-properties": "^7.10.4", - "@babel/plugin-proposal-optional-chaining": "^7.11.0", - "@babel/polyfill": "^7.11.5", - "@babel/preset-env": "^7.11.5", + "@babel/cli": "^7.15.4", + "@babel/node": "^7.15.4", + "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/plugin-proposal-optional-chaining": "^7.14.5", + "@babel/polyfill": "^7.12.1", + "@babel/preset-env": "^7.15.6", "cross-env": "^6.0.3" } } diff --git a/server/server.js b/server/server.js index a512325d..92503dae 100644 --- a/server/server.js +++ b/server/server.js @@ -1,9 +1,9 @@ -import express from 'express' +import express from 'express'; import helmet from 'helmet'; import jwt from 'jsonwebtoken'; import cookieParser from 'cookie-parser'; import expressJwt from 'express-jwt'; -import expressGraphQL from 'express-graphql'; +import {graphqlHTTP} from 'express-graphql'; import schema from '../src/data/schema' import dotenv from 'dotenv'; import config from './config'; @@ -49,11 +49,11 @@ app.post('/login', (req, res) => { app.use( '/graphql', - expressJwt({ - secret: config.auth.jwt.secret, - getToken: req => req.cookies.id_token, - }), - expressGraphQL(req => ({ + // expressJwt({ + // //secret: config.auth.jwt.secret, + // getToken: req => req.cookies.id_token, + // }), + graphqlHTTP(req => ({ schema, graphiql: process.env.REACT_APP_NODE_ENV, rootValue: { request: req }, @@ -65,8 +65,8 @@ const PORT = process.env.REACT_APP_PORT || 5000; const server = app.listen(PORT, console.log(`Server running in ${process.env.REACT_APP_NODE_ENV} mode on port ${PORT}`)) -process.on('unhandledRejection', (err, promise) => { +process.on('unhandledRejection', (err) => { console.log(`Unhandled Rejection: ${err.message}`) // Close server server.close(() => process.exit(1)) -}) \ No newline at end of file +}) diff --git a/src/actions/user.js b/src/actions/user.js index 1c39466c..2cc54bce 100644 --- a/src/actions/user.js +++ b/src/actions/user.js @@ -1,97 +1,103 @@ -import appConfig from '../config'; +//import appConfig from '../config'; -export const LOGIN_REQUEST = 'LOGIN_REQUEST'; +//export const LOGIN_REQUEST = 'LOGIN_REQUEST'; export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'; export const LOGIN_FAILURE = 'LOGIN_FAILURE'; export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'; export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'; -export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'; +//export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'; -function requestLogin(creds) { - return { - type: LOGIN_REQUEST, - isFetching: true, - isAuthenticated: false, - creds, - }; -} +// function requestLogin(creds) { +// return { +// type: LOGIN_REQUEST, +// isFetching: true, +// isAuthenticated: false, +// creds, +// }; +// } -export function receiveLogin(user) { +export function receiveLogin() { return { - type: LOGIN_SUCCESS, - isFetching: false, - isAuthenticated: true, - id_token: user.id_token, + type: LOGIN_SUCCESS + // isFetching: false, + // isAuthenticated: true, + //id_token: user.id_token, }; } -function loginError(message) { +function loginError(payload) { return { type: LOGIN_FAILURE, - isFetching: false, - isAuthenticated: false, - message, + // isFetching: false, + // isAuthenticated: false, + payload, }; } function requestLogout() { return { type: LOGOUT_REQUEST, - isFetching: true, - isAuthenticated: true, + // isFetching: true, + // isAuthenticated: true, }; } export function receiveLogout() { return { type: LOGOUT_SUCCESS, - isFetching: false, - isAuthenticated: false, + // isFetching: false, + // isAuthenticated: false, }; } // Logs the user out export function logoutUser() { - return dispatch => { + return (dispatch) => { dispatch(requestLogout()); - localStorage.removeItem('id_token'); - document.cookie = 'id_token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; + localStorage.removeItem('authenticated'); + //document.cookie = 'id_token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; dispatch(receiveLogout()); }; } export function loginUser(creds) { - const config = { - method: 'POST', - headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - credentials: 'include', - body: `login=${creds.login}&password=${creds.password}`, - }; - - return dispatch => { + // const config = { + // method: 'POST', + // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + // credentials: 'include', + // body: `login=${creds.login}&password=${creds.password}`, + // }; + + return (dispatch) => { // We dispatch requestLogin to kickoff the call to the API - dispatch(requestLogin(creds)); - if(process.env.NODE_ENV === "development") { - return fetch('/login', config) - .then(response => response.json().then(user => ({ user, response }))) - .then(({ user, response }) => { - if (!response.ok) { - // If there was a problem, we want to - // dispatch the error condition - dispatch(loginError(user.message)); - return Promise.reject(user); - } - // in posts create new action and check http status, if malign logout - // If login was successful, set the token in local storage - localStorage.setItem('id_token', user.id_token); - // Dispatch the success action - dispatch(receiveLogin(user)); - return Promise.resolve(user); - }) - .catch(err => console.error('Error: ', err)); - } else { - localStorage.setItem('id_token', appConfig.id_token); - dispatch(receiveLogin({id_token: appConfig.id_token})) - } + dispatch(receiveLogin()); + //if (process.env.NODE_ENV === "development") { + if (creds.login.length > 0 && creds.password.length > 0) { + localStorage.setItem('authenticated', true) + } else { + dispatch(loginError('Something was wrong. Try again')); + } + //} }; } + // return fetch('/login', config) + // .then(response => response.json().then(user => ({ user, response }))) + // .then(({ user, response }) => { + // if (!response.ok) { + // // If there was a problem, we want to + // // dispatch the error condition + // dispatch(loginError(user.message)); + // return Promise.reject(user); + // } + // // in posts create new action and check http status, if malign logout + // // If login was successful, set the token in local storage + // localStorage.setItem('id_token', user.id_token); + // // Dispatch the success action + // dispatch(receiveLogin(user)); + // return Promise.resolve(user); + // }) + // .catch(err => console.error('Error: ', err)); + // } else { + // localStorage.setItem('id_token', appConfig.id_token); + // dispatch(receiveLogin({id_token: appConfig.id_token})) + // } diff --git a/src/components/App.js b/src/components/App.js index b519154d..3c5eb888 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -14,7 +14,7 @@ import Register from '../pages/register'; import { logoutUser } from '../actions/user'; const PrivateRoute = ({dispatch, component, ...rest }) => { - if (!Login.isAuthenticated(localStorage.getItem('id_token'))) { + if (!Login.isAuthenticated(JSON.parse(localStorage.getItem('authenticated')))) { dispatch(logoutUser()); return () } else { diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 5ffa8430..2373afbf 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -15,6 +15,7 @@ import { Navbar, Nav, NavItem, + NavLink, Button, Dropdown, DropdownToggle, @@ -24,7 +25,6 @@ import { InputGroup, InputGroupAddon, } from 'reactstrap'; -import { NavLink } from 'react-router-dom'; import Icon from '../Icon'; @@ -106,8 +106,8 @@ class Header extends React.Component { Profile - - Logout + + Logout diff --git a/src/config.js b/src/config.js index 27cbf749..2d7f646c 100644 --- a/src/config.js +++ b/src/config.js @@ -1,4 +1,8 @@ export default { isBackend: process.env.REACT_APP_BACKEND, - id_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjpmYWxzZSwibG9naW4iOiJ1c2VyIiwiaWF0IjoxNTczNzQ4ODI1LCJleHAiOjE2MjA0MDQ4MjV9.Jd1Trqu6izHq2R3uw4enrDlQKG4mzZdipSMdYQD_9JM' -}; \ No newline at end of file + id_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjpmYWxzZSwibG9naW4iOiJ1c2VyIiwiaWF0IjoxNTczNzQ4ODI1LCJleHAiOjE2MjA0MDQ4MjV9.Jd1Trqu6izHq2R3uw4enrDlQKG4mzZdipSMdYQD_9JM', + auth: { + login: 'user', + password: 'password' + } +}; diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index fd76902b..85bf69cd 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -15,8 +15,6 @@ import s from './Login.module.scss'; import Widget from '../../components/Widget'; import Footer from "../../components/Footer"; import { loginUser } from '../../actions/user'; -import jwt from 'jsonwebtoken'; -import config from '../../config' class Login extends React.Component { static propTypes = { @@ -35,12 +33,7 @@ class Login extends React.Component { }; static isAuthenticated(token) { - // We check if app runs with backend mode - if (!config.isBackend && token) return true; - if (!token) return; - const date = new Date().getTime() / 1000; - const data = jwt.decode(token); - return date < data.exp; + if (token) return true; } constructor(props) { @@ -71,12 +64,9 @@ class Login extends React.Component { } render() { - const {from} = this.props.location.state || { - from: {pathname: '/app'}, - }; + const {from} = this.props.location.state || {from: {pathname: '/app'}}; - if (this.props.isAuthenticated) { - // cant access login page while logged in + if (Login.isAuthenticated(JSON.parse(localStorage.getItem('authenticated')))) { return ; } diff --git a/src/pages/posts/list/PostList.js b/src/pages/posts/list/PostList.js index c6329cdb..86f36dbf 100644 --- a/src/pages/posts/list/PostList.js +++ b/src/pages/posts/list/PostList.js @@ -91,11 +91,11 @@ class PostList extends React.Component { )) )} - {this.props.isFetching && ( - - Loading... - - )} + {/*{this.props.isFetching && (*/} + {/* */} + {/* Loading...*/} + {/* */} + {/*)}*/}
Error + Retry Message
Success - Message
+ Success Message