├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── App.test.js ├── AppRenderer.js ├── assets │ └── scss │ │ ├── _class-generator.scss │ │ ├── _customs.scss │ │ ├── _functions.scss │ │ ├── _general.scss │ │ ├── _main.scss │ │ ├── _mixins.scss │ │ ├── _variables.scss │ │ └── themes │ │ ├── colors.scss │ │ ├── dark.scss │ │ └── light.scss ├── common │ ├── api │ │ ├── auth.js │ │ └── configuration.js │ ├── constants │ │ └── default-values.js │ ├── enums │ │ ├── auth.js │ │ └── theme.js │ ├── redux │ │ ├── actions │ │ │ ├── auth-actions.js │ │ │ ├── landing-actions.js │ │ │ └── types.js │ │ ├── connects.js │ │ ├── reducers │ │ │ ├── auth-reducer.js │ │ │ ├── index.js │ │ │ └── landing-reducer.js │ │ ├── sagas │ │ │ ├── auth-saga.js │ │ │ └── index.js │ │ └── store.js │ └── utils │ │ └── theme.js ├── components │ └── common │ │ ├── spinner.js │ │ └── switch.js ├── index.js ├── layouts │ ├── admin.js │ ├── anonymous.js │ └── customer.js ├── pages │ ├── admin │ │ └── dashboard.js │ ├── auth │ │ ├── forgot-password.js │ │ ├── login.js │ │ ├── register.js │ │ └── reset-password.js │ ├── customer │ │ └── dashboard.js │ └── landing.js ├── reportWebVitals.js └── setupTests.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react.js-bootstrap-boilerplate", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-svg-core": "^1.2.35", 7 | "@fortawesome/free-solid-svg-icons": "^5.15.3", 8 | "@fortawesome/react-fontawesome": "^0.1.14", 9 | "@reduxjs/toolkit": "^1.5.1", 10 | "@testing-library/jest-dom": "^5.11.4", 11 | "@testing-library/react": "^11.1.0", 12 | "@testing-library/user-event": "^12.1.10", 13 | "axios": "^0.21.1", 14 | "bootstrap": "^4.6.0", 15 | "history": "^5.0.0", 16 | "node-sass": "^5.0.0", 17 | "react": "^17.0.2", 18 | "react-bootstrap": "^1.5.2", 19 | "react-dom": "^17.0.2", 20 | "react-jss": "^10.6.0", 21 | "react-jwt": "^1.1.2", 22 | "react-redux": "^7.2.3", 23 | "react-router-dom": "^5.2.0", 24 | "react-scripts": "4.0.3", 25 | "redux": "^4.0.5", 26 | "redux-saga": "^1.1.3", 27 | "web-vitals": "^1.0.1" 28 | }, 29 | "scripts": { 30 | "start": "react-scripts start", 31 | "build": "react-scripts build", 32 | "test": "react-scripts test", 33 | "eject": "react-scripts eject" 34 | }, 35 | "eslintConfig": { 36 | "extends": [ 37 | "react-app", 38 | "react-app/jest" 39 | ] 40 | }, 41 | "browserslist": { 42 | "production": [ 43 | ">0.2%", 44 | "not dead", 45 | "not op_mini all" 46 | ], 47 | "development": [ 48 | "last 1 chrome version", 49 | "last 1 firefox version", 50 | "last 1 safari version" 51 | ] 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fhrryDeveloper/react.js-bootstrap-boilerplate/d8616b5aaf3740f6a16b701e461eefc6cdf1c713/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 24 | React Bootstrap Boilerplate 25 | 26 | 27 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fhrryDeveloper/react.js-bootstrap-boilerplate/d8616b5aaf3740f6a16b701e461eefc6cdf1c713/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fhrryDeveloper/react.js-bootstrap-boilerplate/d8616b5aaf3740f6a16b701e461eefc6cdf1c713/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useEffect } from 'react'; 2 | import { 3 | Switch, 4 | Route, 5 | Redirect, 6 | withRouter 7 | } from 'react-router-dom'; 8 | 9 | import AdminLayout from './layouts/admin'; 10 | import CustomerLayout from './layouts/customer'; 11 | import AnonymousLayout from './layouts/anonymous'; 12 | import { LoadingSpinner } from './components/common/spinner'; 13 | import { connectAuthCheck } from './common/redux/connects'; 14 | import { UserRole } from './common/enums/auth'; 15 | 16 | function App({ history, tokenVerified, authenticated, userRole, verifyAccessTokenAction, toggleDarkTheme }) { 17 | useEffect(() => { 18 | verifyAccessTokenAction(history, false); 19 | }, []); 20 | 21 | const renderApp = () => ( 22 | 23 | 24 | {authenticated && (userRole === UserRole.Admin) ? : } 25 | 26 | 27 | {authenticated && (userRole === UserRole.Customer) ? : } 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | 35 | return ( 36 | 37 | { !tokenVerified ? : renderApp() } 38 | 39 | 40 | ); 41 | } 42 | 43 | export default withRouter(connectAuthCheck(App)); 44 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/AppRenderer.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from 'react'; 2 | import { Provider } from 'react-redux'; 3 | import ReactDOM from 'react-dom'; 4 | import { BrowserRouter as Router } from 'react-router-dom'; 5 | 6 | import App from './App'; 7 | import { LoadingSpinner } from './components/common/spinner'; 8 | import store from './common/redux/store'; 9 | import reportWebVitals from './reportWebVitals'; 10 | 11 | ReactDOM.render( 12 | // 13 | 14 | 15 | }> 16 | 17 | 18 | 19 | , 20 | // , 21 | document.getElementById('root') 22 | ); 23 | 24 | // If you want to start measuring performance in your app, pass a function 25 | // to log results (for example: reportWebVitals(console.log)) 26 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 27 | reportWebVitals(); 28 | -------------------------------------------------------------------------------- /src/assets/scss/_class-generator.scss: -------------------------------------------------------------------------------- 1 | // Spacing 2 | @for $i from 1 through 100 { 3 | // spacing classes 4 | .ml-#{$i} { 5 | margin-left: #{$i}px; 6 | } 7 | .mr-#{$i} { 8 | margin-right: #{$i}px; 9 | } 10 | .mx-#{$i} { 11 | margin-left: #{$i}px; 12 | margin-right: #{$i}px; 13 | } 14 | .mt-#{$i} { 15 | margin-top: #{$i}px; 16 | } 17 | .mb-#{$i} { 18 | margin-bottom: #{$i}px; 19 | } 20 | .my-#{$i} { 21 | margin-top: #{$i}px; 22 | margin-bottom: #{$i}px; 23 | } 24 | .m-#{$i} { 25 | margin: #{$i}px; 26 | } 27 | .pl-#{$i} { 28 | padding-left: #{$i}px; 29 | } 30 | .pr-#{$i} { 31 | padding-right: #{$i}px; 32 | } 33 | .px-#{$i} { 34 | padding-left: #{$i}px; 35 | padding-right: #{$i}px; 36 | } 37 | .pt-#{$i} { 38 | padding-top: #{$i}px; 39 | } 40 | .pb-#{$i} { 41 | padding-bottom: #{$i}px; 42 | } 43 | .py-#{$i} { 44 | padding-top: #{$i}px; 45 | padding-bottom: #{$i}px; 46 | } 47 | .p-#{$i} { 48 | padding: #{$i}px; 49 | } 50 | } 51 | 52 | // Flex 53 | .flex-auto { 54 | flex: auto; 55 | } 56 | 57 | @for $i from 1 through 12 { 58 | .flex-#{$i} { 59 | flex: #{$i}; 60 | } 61 | } 62 | 63 | // Typography 64 | @for $i from 1 through 100 { 65 | .font-size-#{$i}vw { 66 | font-size: #{$i}vw; 67 | } 68 | 69 | .font-size-#{$i}vh { 70 | font-size: #{$i}vh; 71 | } 72 | } 73 | 74 | // Layout 75 | @for $i from 0 through 1000 { 76 | .z-index-#{$i} { 77 | z-index: #{$i}; 78 | } 79 | } 80 | 81 | // Sizing 82 | @for $i from 1 through 5 { 83 | .w-#{$i}rem { 84 | width: #{$i}rem; 85 | } 86 | 87 | .h-#{$i}rem { 88 | height: #{$i}rem; 89 | } 90 | 91 | .fixed-center-m#{$i} { 92 | position: fixed; 93 | left: calc(50vw - #{$i}rem); 94 | top: calc(50vh - #{$i}rem); 95 | } 96 | } -------------------------------------------------------------------------------- /src/assets/scss/_customs.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", 4 | "Droid Sans", "Helvetica Neue", sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; 11 | } 12 | 13 | /* 1.Layout */ 14 | 15 | 16 | /* 2.Cursor */ 17 | .cursor-pointer { 18 | cursor: pointer; 19 | } 20 | 21 | /* 3.Switch */ 22 | @mixin switch($res: "sm") { 23 | $index: 1rem; 24 | $mainVal: 1rem; 25 | 26 | @if $res == "md" { 27 | $index: 2rem; 28 | $mainVal: 1.5rem; 29 | } @else if $res == "lg" { 30 | $index: 3rem; 31 | $mainVal: 2rem; 32 | } @else if $res == "xl" { 33 | $index: 4rem; 34 | $mainVal: 2.5rem; 35 | } 36 | 37 | .custom-control-label { 38 | padding-left: #{$index / 3}; 39 | padding-bottom: #{$mainVal / 3}; 40 | 41 | &::before { 42 | height: $mainVal; 43 | width: calc(#{$index} + 0.75rem); 44 | border-radius: $mainVal * 2; 45 | border-width: 0 !important; 46 | top: 0; 47 | background-color: #adb5bd; 48 | } 49 | 50 | &::after { 51 | width: calc(#{$mainVal} - 4px); 52 | height: calc(#{$mainVal} - 4px); 53 | border-radius: calc(#{$index} - (#{$mainVal} / 2)); 54 | top: 2px; 55 | } 56 | } 57 | 58 | @each $name, $theme-color in $theme-colors { 59 | .custom-control-input:checked ~ .custom-control-label-#{$name}::before { 60 | background-color: $theme-color; 61 | } 62 | 63 | .custom-control-input:focus:not(:checked) ~ .custom-control-label-#{$name}::before { 64 | background-color: #adb5bd; 65 | box-shadow: 0 0 0 1px rgba(#adb5bd, 0.5); 66 | } 67 | 68 | .custom-control-input:focus:checked ~ .custom-control-label-#{$name}::before { 69 | background-color: $theme-color; 70 | box-shadow: 0 0 0 1px rgba($theme-color, 0.5); 71 | } 72 | 73 | .custom-control-input:not(:disabled):active:not(:checked) ~ .custom-control-label::before { 74 | background-color: #adb5bd; 75 | } 76 | 77 | .custom-control-label-#{$name}::after { 78 | background-color: white; 79 | } 80 | } 81 | 82 | .custom-control-input:checked ~ .custom-control-label::after { 83 | transform: translateX(calc(#{$mainVal} - 0.25rem)); 84 | } 85 | } 86 | 87 | // YOU CAN PUT ALL RESOLUTION HERE 88 | // sm - DEFAULT, md, lg, xl 89 | .custom-switch.custom-switch-sm { 90 | @include switch(); 91 | } 92 | 93 | .custom-switch.custom-switch-md { 94 | @include switch("md"); 95 | } 96 | 97 | .custom-switch.custom-switch-lg { 98 | @include switch("lg"); 99 | } 100 | 101 | .custom-switch.custom-switch-xl { 102 | @include switch("xl"); 103 | } 104 | 105 | /* 4.Mouse Hover Effects */ 106 | .hover-underline { 107 | &:hover { 108 | text-decoration: underline; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/assets/scss/_functions.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fhrryDeveloper/react.js-bootstrap-boilerplate/d8616b5aaf3740f6a16b701e461eefc6cdf1c713/src/assets/scss/_functions.scss -------------------------------------------------------------------------------- /src/assets/scss/_general.scss: -------------------------------------------------------------------------------- 1 | @import '~bootstrap/scss/functions'; 2 | @import '~bootstrap/scss/variables'; 3 | @import '~bootstrap/scss/mixins'; 4 | 5 | @import './mixins'; 6 | -------------------------------------------------------------------------------- /src/assets/scss/_main.scss: -------------------------------------------------------------------------------- 1 | // Import default bootstrap functions, variables, mixins 2 | @import '~bootstrap/scss/functions'; 3 | @import '~bootstrap/scss/variables'; 4 | @import '~bootstrap/scss/mixins'; 5 | 6 | // Customize variables 7 | @import './variables'; 8 | 9 | // Bootstraping with the customized variables 10 | @import '~bootstrap/scss/bootstrap'; 11 | 12 | // Import custom scss styles and mixins 13 | @import './functions'; 14 | @import './class-generator'; 15 | @import './mixins'; 16 | 17 | // Import other styles 18 | @import './customs'; -------------------------------------------------------------------------------- /src/assets/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin absolute_fit_parent() { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | bottom: 0; 6 | right: 0; 7 | } 8 | 9 | @mixin pretty-scroll() { 10 | overflow-y: auto; 11 | &::-webkit-scrollbar { 12 | width: 6px; 13 | } 14 | 15 | &::-webkit-scrollbar-thumb { 16 | border-radius: 3px; 17 | background-color: rgba(102, 102, 102, 0.5); 18 | outline: 1px solid rgba(102, 102, 102, 0.5); 19 | } 20 | } 21 | 22 | @mixin hover_bg-effect($color, $duration) { 23 | cursor: pointer; 24 | transition: ease background-color #{$duration}s; 25 | &:hover { 26 | background-color: $color; 27 | } 28 | } 29 | 30 | @mixin hover_font-effect($color, $duration) { 31 | cursor: pointer; 32 | transition: ease color #{$duration}s; 33 | &:hover { 34 | color: $color; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/scss/_variables.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fhrryDeveloper/react.js-bootstrap-boilerplate/d8616b5aaf3740f6a16b701e461eefc6cdf1c713/src/assets/scss/_variables.scss -------------------------------------------------------------------------------- /src/assets/scss/themes/colors.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $colors: ( 3 | niagara: #07A39D, // primary color 4 | jewel: #106D2F, // success color 5 | blue-lagoon: #02727C, 6 | blue-romance: #D1F4D9, 7 | atoll: #0C6C7E, // info color 8 | humming-bird: #D0F3F8, 9 | tangerine: #F18F01, // warning color 10 | peach: #FFE4BC, 11 | merlot: #841E30, // danger color 12 | cosmos: #FED6DB, 13 | japonica: #D97070, 14 | pickled-bluewood: #354A5E, 15 | cod-gray: #151515, 16 | mine-shaft: #3E3E3E, 17 | tundora: #414141, 18 | dove-gray: #666666, 19 | regent-gray: #86929E, 20 | mercury: #E3E3E3, 21 | black-squeeze: #E6F6F5, 22 | catskill-white: #F7F9FB, 23 | athens-gray: #F7F8FA, 24 | silver: #C1C1C1, 25 | aqua-island: #9CDAD8, 26 | valencia: #DA3E51, 27 | porcelain: #EBEDEF, 28 | golden-sand: #F1D06D, 29 | trout: #495057, 30 | pattens-blue: #DFF4FF, 31 | fountain-blue: #5897BF, 32 | old-lace: #FEF9F2 33 | ); 34 | 35 | -------------------------------------------------------------------------------- /src/assets/scss/themes/dark.scss: -------------------------------------------------------------------------------- 1 | @import './colors.scss'; 2 | 3 | // Theme colors 4 | $theme-colors: ( 5 | primary: map-get($map: $colors, $key: 'blue-lagoon'), 6 | success: map-get($map: $colors, $key: 'atoll'), 7 | info: map-get($map: $colors, $key: 'fountain-blue'), 8 | warning: map-get($map: $colors, $key: 'japonica'), 9 | danger: map-get($map: $colors, $key: 'valencia') 10 | ); 11 | 12 | @import '../main'; -------------------------------------------------------------------------------- /src/assets/scss/themes/light.scss: -------------------------------------------------------------------------------- 1 | @import './colors.scss'; 2 | 3 | // Theme colors 4 | $theme-colors: ( 5 | primary: map-get($map: $colors, $key: 'niagara'), 6 | success: map-get($map: $colors, $key: 'jewel'), 7 | info: map-get($map: $colors, $key: 'atoll'), 8 | warning: map-get($map: $colors, $key: 'tangerine'), 9 | danger: map-get($map: $colors, $key: 'merlot') 10 | ); 11 | 12 | @import '../main'; -------------------------------------------------------------------------------- /src/common/api/auth.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import { decodeToken, isExpired } from "react-jwt"; 3 | 4 | import { DevAPIServer, ProdAPIServer, ConstantNames } from '../constants/default-values'; 5 | 6 | const APIServer = process.env.NODE_ENV === 'PRODUCTION' ? ProdAPIServer : DevAPIServer; 7 | 8 | const AuthAPI = { 9 | signInWithEmailAndPassword: (email, password) => { 10 | const url = `${APIServer}/auth/login`; 11 | return axios.post(url, { email, password }).then(res => AuthAPI.updateAccessToken(res.accessToken), e => e); 12 | }, 13 | verifyAccessToken: () => { 14 | if (!AuthAPI.getAccessToken()) { 15 | return; 16 | } 17 | const url = `${APIServer}/auth/profile`; 18 | return axios.get(url).then(user => ({ user }), e => e); 19 | }, 20 | createUserWithEmailAndPassword: (email, password) => { 21 | const url = `${APIServer}/auth/register`; 22 | return axios.post(url, { email, password }).then(successResponse => successResponse, e => e); 23 | }, 24 | signOut: () => { 25 | AuthAPI.removeAccessToken(); 26 | }, 27 | sendPasswordResetEmail: (email) => { 28 | 29 | }, 30 | getDefaultRedirectPath: () => { 31 | const decodedToken = decodeToken(AuthAPI.getAccessToken()); 32 | if (!decodedToken || !decodedToken.role) return '/'; 33 | return `/${String(decodedToken.role).toLowerCase()}/dashboard`; 34 | }, 35 | getAccessToken: () => { 36 | return localStorage.getItem(ConstantNames.AccessToken); 37 | }, 38 | updateAccessToken: at => { 39 | localStorage.setItem(ConstantNames.AccessToken, at) 40 | }, 41 | removeAccessToken: () => { 42 | localStorage.removeItem(ConstantNames.AccessToken); 43 | } 44 | } 45 | 46 | export default AuthAPI; 47 | -------------------------------------------------------------------------------- /src/common/api/configuration.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import AuthAPI from './auth'; 3 | 4 | // Add a request interceptor 5 | axios.interceptors.request.use(function (config) { 6 | const url = config.url; 7 | if (url.includes('admin') || url.includes('client') || url.includes('profile')) { 8 | const at = AuthAPI.getAccessToken(); 9 | config.headers.Authorization = `bearer ${at}`; 10 | } 11 | return config; 12 | }, function (error) { 13 | return Promise.reject(error); 14 | }); 15 | 16 | // Add a response interceptor 17 | axios.interceptors.response.use(function (response) { 18 | // console.log('Response Interceptor:', response) 19 | return response.data; 20 | }, function (error) { 21 | return Promise.reject(error); 22 | }); -------------------------------------------------------------------------------- /src/common/constants/default-values.js: -------------------------------------------------------------------------------- 1 | import { UITheme } from '../enums/theme'; 2 | 3 | // UI Theme 4 | export const defaultTheme = UITheme.Light; 5 | 6 | // Const Names 7 | export const ConstantNames = { 8 | AccessToken: 'access-token', 9 | UITheme: 'ui-theme' 10 | } 11 | 12 | // API Integration 13 | export const DevAPIServer = 'http://localhost:3030/api'; 14 | export const ProdAPIServer = 'http://localhost:3030/api'; 15 | -------------------------------------------------------------------------------- /src/common/enums/auth.js: -------------------------------------------------------------------------------- 1 | export const UserRole = { 2 | Owner: 'OWNER', 3 | Admin: 'ADMIN', 4 | Customer: 'CUSTOMER' 5 | }; 6 | -------------------------------------------------------------------------------- /src/common/enums/theme.js: -------------------------------------------------------------------------------- 1 | export const UITheme = { 2 | Light: 'LIGHT', 3 | Dark: 'DARK' 4 | }; 5 | -------------------------------------------------------------------------------- /src/common/redux/actions/auth-actions.js: -------------------------------------------------------------------------------- 1 | import { 2 | LOGIN_USER, 3 | LOGIN_USER_SUCCESS, 4 | LOGIN_USER_ERROR, 5 | VERIFY_ACCESS_TOKEN, 6 | VERIFY_ACCESS_TOKEN_SUCCESS, 7 | VERIFY_ACCESS_TOKEN_ERROR, 8 | LOGOUT_USER, 9 | REGISTER_USER, 10 | REGISTER_USER_SUCCESS, 11 | REGISTER_USER_ERROR, 12 | FORGOT_PASSWORD, 13 | FORGOT_PASSWORD_SUCCESS, 14 | FORGOT_PASSWORD_ERROR, 15 | RESET_PASSWORD, 16 | RESET_PASSWORD_SUCCESS, 17 | RESET_PASSWORD_ERROR, 18 | } from './types'; 19 | 20 | export const loginUser = (loginUserDto, history) => ({ 21 | type: LOGIN_USER, 22 | payload: { loginUserDto, history }, 23 | }); 24 | export const loginUserSuccess = () => ({ 25 | type: LOGIN_USER_SUCCESS, 26 | payload: {}, 27 | }); 28 | export const loginUserError = (message) => ({ 29 | type: LOGIN_USER_ERROR, 30 | payload: { message }, 31 | }); 32 | 33 | export const verifyAccessToken = (history, forceRedirect = true) => ({ 34 | type: VERIFY_ACCESS_TOKEN, 35 | payload: { history, forceRedirect }, 36 | }); 37 | export const verifyAccessTokenSuccess = (user) => ({ 38 | type: VERIFY_ACCESS_TOKEN_SUCCESS, 39 | payload: { user }, 40 | }); 41 | export const verifyAccessTokenError = (message) => ({ 42 | type: VERIFY_ACCESS_TOKEN_ERROR, 43 | payload: { message }, 44 | }); 45 | 46 | export const forgotPassword = (forgotPasswordDto, history) => ({ 47 | type: FORGOT_PASSWORD, 48 | payload: { forgotPasswordDto, history }, 49 | }); 50 | export const forgotPasswordSuccess = (email) => ({ 51 | type: FORGOT_PASSWORD_SUCCESS, 52 | payload: { email }, 53 | }); 54 | export const forgotPasswordError = (message) => ({ 55 | type: FORGOT_PASSWORD_ERROR, 56 | payload: { message }, 57 | }); 58 | 59 | export const resetPassword = ({ password, history }) => ({ 60 | type: RESET_PASSWORD, 61 | payload: { resetPasswordDto: { password }, history }, 62 | }); 63 | export const resetPasswordSuccess = () => ({ 64 | type: RESET_PASSWORD_SUCCESS, 65 | payload: {}, 66 | }); 67 | export const resetPasswordError = (message) => ({ 68 | type: RESET_PASSWORD_ERROR, 69 | payload: { message }, 70 | }); 71 | 72 | export const registerUser = (registerUserDto, history) => ({ 73 | type: REGISTER_USER, 74 | payload: { registerUserDto, history }, 75 | }); 76 | export const registerUserSuccess = () => ({ 77 | type: REGISTER_USER_SUCCESS, 78 | payload: {}, 79 | }); 80 | export const registerUserError = (message) => ({ 81 | type: REGISTER_USER_ERROR, 82 | payload: { message }, 83 | }); 84 | 85 | export const logoutUser = (history) => ({ 86 | type: LOGOUT_USER, 87 | payload: { history }, 88 | }); 89 | -------------------------------------------------------------------------------- /src/common/redux/actions/landing-actions.js: -------------------------------------------------------------------------------- 1 | import { 2 | LANDING_FIRST_PAGE, 3 | LANDING_LAST_PAGE, 4 | LANDING_NEXT_PAGE, 5 | LANDING_PREV_PAGE, 6 | LANDING_SET_PAGES 7 | } from './types'; 8 | 9 | export const goToNextPage = () => ({ type: LANDING_NEXT_PAGE }); 10 | export const goToPrevPage = () => ({ type: LANDING_PREV_PAGE }); 11 | export const goToFirstPage = () => ({ type: LANDING_FIRST_PAGE }); 12 | export const goToLastPage = () => ({ type: LANDING_LAST_PAGE }); 13 | export const setPages = (pagesCount, sectionsCount) => ({ type: LANDING_SET_PAGES, payload: { pagesCount, sectionsCount } }); 14 | -------------------------------------------------------------------------------- /src/common/redux/actions/types.js: -------------------------------------------------------------------------------- 1 | /* AUTHENTICATION */ 2 | export const LOGIN_USER = 'LOGIN_USER'; 3 | export const LOGIN_USER_SUCCESS = 'LOGIN_USER_SUCCESS'; 4 | export const LOGIN_USER_ERROR = 'LOGIN_USER_ERROR'; 5 | export const VERIFY_ACCESS_TOKEN = 'VERIFY-ACCESS-TOKEN'; 6 | export const VERIFY_ACCESS_TOKEN_SUCCESS = 'VERIFY-ACCESS-TOKEN-SUCCESS'; 7 | export const VERIFY_ACCESS_TOKEN_ERROR = 'VERIFY-ACCESS-TOKEN-ERROR'; 8 | export const REGISTER_USER = 'REGISTER_USER'; 9 | export const REGISTER_USER_SUCCESS = 'REGISTER_USER_SUCCESS'; 10 | export const REGISTER_USER_ERROR = 'REGISTER_USER_ERROR'; 11 | export const LOGOUT_USER = 'LOGOUT_USER'; 12 | export const FORGOT_PASSWORD = 'FORGOT_PASSWORD'; 13 | export const FORGOT_PASSWORD_SUCCESS = 'FORGOT_PASSWORD_SUCCESS'; 14 | export const FORGOT_PASSWORD_ERROR = 'FORGOT_PASSWORD_ERROR'; 15 | export const RESET_PASSWORD = 'RESET_PASSWORD'; 16 | export const RESET_PASSWORD_SUCCESS = 'RESET_PASSWORD_SUCCESS'; 17 | export const RESET_PASSWORD_ERROR = 'RESET_PASSWORD_ERROR'; 18 | 19 | // Landing Page 20 | export const LANDING_NEXT_PAGE = 'LANDING-NEXT-PAGE'; 21 | export const LANDING_PREV_PAGE = 'LANDING-PREV-PAGE'; 22 | export const LANDING_FIRST_PAGE = 'LANDING-FIRST-PAGE'; 23 | export const LANDING_LAST_PAGE = 'LANDING-LAST-PAGE'; 24 | export const LANDING_SET_PAGES = 'LANDING-SET-PAGES'; 25 | -------------------------------------------------------------------------------- /src/common/redux/connects.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | 3 | import { loginUser, logoutUser, verifyAccessToken } from './actions/auth-actions'; 4 | import { goToFirstPage, goToLastPage, goToNextPage, goToPrevPage, setPages } from './actions/landing-actions'; 5 | 6 | // AUTHENTICATION 7 | const mapUserStateToProps = ({ authReducer }) => ({ 8 | authenticated: !!authReducer.user, 9 | user: authReducer.user 10 | }); 11 | const mapAuthDispatchToProps = { loginUserAction: loginUser, logoutUserAction: logoutUser }; 12 | export const connectAuth = connect( mapUserStateToProps, mapAuthDispatchToProps ); 13 | 14 | const mapAuthStateToProps = ({ authReducer }) => ({ 15 | tokenVerified: !(authReducer.user === undefined), 16 | authenticated: !!authReducer.user, 17 | userRole: !authReducer.user ? null : authReducer.user.role }); 18 | const mapAuthCheckDispatchToProps = { verifyAccessTokenAction: verifyAccessToken }; 19 | export const connectAuthCheck = connect(mapAuthStateToProps, mapAuthCheckDispatchToProps); 20 | 21 | // LANDING PAGE 22 | const mapLandingStateToProps = ({ landingReducer }) => ({ 23 | index: landingReducer.index, 24 | pagesCount: landingReducer.pagesCount, 25 | sectionsCount: landingReducer.sectionsCount 26 | }); 27 | const mapLandingDispathToProps = { goToFirstPage, goToLastPage, goToPrevPage, goToNextPage }; 28 | export const connectLandingNavigation = connect( mapLandingStateToProps, mapLandingDispathToProps ); 29 | const mapLandingPageIndexToProps = ({ landingReducer }) => ({ index: landingReducer.index }); 30 | const mapLandingDispathPagesToProps = { setPages }; 31 | export const connectLandingPages = connect(mapLandingPageIndexToProps, mapLandingDispathPagesToProps); 32 | -------------------------------------------------------------------------------- /src/common/redux/reducers/auth-reducer.js: -------------------------------------------------------------------------------- 1 | import { 2 | LOGIN_USER, 3 | LOGIN_USER_SUCCESS, 4 | LOGIN_USER_ERROR, 5 | VERIFY_ACCESS_TOKEN, 6 | VERIFY_ACCESS_TOKEN_SUCCESS, 7 | VERIFY_ACCESS_TOKEN_ERROR, 8 | LOGOUT_USER, 9 | REGISTER_USER, 10 | REGISTER_USER_SUCCESS, 11 | REGISTER_USER_ERROR, 12 | FORGOT_PASSWORD, 13 | FORGOT_PASSWORD_SUCCESS, 14 | FORGOT_PASSWORD_ERROR, 15 | RESET_PASSWORD, 16 | RESET_PASSWORD_SUCCESS, 17 | RESET_PASSWORD_ERROR, 18 | } from '../actions/types'; 19 | 20 | const INIT_STATE = { 21 | user: undefined, 22 | forgotPasswordEmail: '', 23 | loading: false, 24 | error: '', 25 | }; 26 | 27 | const authReducer = (state = INIT_STATE, action) => { 28 | switch (action.type) { 29 | case LOGIN_USER: 30 | return { ...state, user: null, loading: true, error: '' }; 31 | case LOGIN_USER_SUCCESS: 32 | return { ...state, loading: false, user: null, error: '' }; 33 | case LOGIN_USER_ERROR: 34 | return { ...state, loading: false, user: null, error: action.payload.message }; 35 | case VERIFY_ACCESS_TOKEN: 36 | return { ...state, loading: true, error: '' }; 37 | case VERIFY_ACCESS_TOKEN_SUCCESS: 38 | return { ...state, loading: false, user: action.payload.user, error: '' }; 39 | case VERIFY_ACCESS_TOKEN_ERROR: 40 | return { ...state, loading: false, user: null, error: action.payload.message }; 41 | case FORGOT_PASSWORD: 42 | return { ...state, loading: true, error: '' }; 43 | case FORGOT_PASSWORD_SUCCESS: 44 | return { ...state, loading: false, forgotPasswordEmail: action.payload.email, error: '' }; 45 | case FORGOT_PASSWORD_ERROR: 46 | return { ...state, loading: false, forgotPasswordEmail: '', error: action.payload.message }; 47 | case RESET_PASSWORD: 48 | return { ...state, loading: true, error: '' }; 49 | case RESET_PASSWORD_SUCCESS: 50 | return { ...state, loading: false, error: '' }; 51 | case RESET_PASSWORD_ERROR: 52 | return { ...state, loading: false, error: action.payload.message }; 53 | case REGISTER_USER: 54 | return { ...state, loading: true, error: '' }; 55 | case REGISTER_USER_SUCCESS: 56 | return { ...state, loading: false, error: '' }; 57 | case REGISTER_USER_ERROR: 58 | return { ...state, loading: false, error: action.payload.message }; 59 | case LOGOUT_USER: 60 | return { ...state, user: null, error: '' }; 61 | default: 62 | return { ...state }; 63 | } 64 | }; 65 | 66 | export default authReducer; 67 | -------------------------------------------------------------------------------- /src/common/redux/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | 3 | import authReducer from './auth-reducer'; 4 | import landingReducer from './landing-reducer'; 5 | 6 | const rootReducer = combineReducers({ 7 | authReducer, 8 | landingReducer 9 | }); 10 | 11 | export default rootReducer; 12 | -------------------------------------------------------------------------------- /src/common/redux/reducers/landing-reducer.js: -------------------------------------------------------------------------------- 1 | import { 2 | LANDING_PREV_PAGE, 3 | LANDING_NEXT_PAGE, 4 | LANDING_LAST_PAGE, 5 | LANDING_FIRST_PAGE, 6 | LANDING_SET_PAGES 7 | } from '../actions/types'; 8 | 9 | const initialLandingState = { 10 | index: 0, 11 | pagesCount: 0, 12 | sectionsCount: 0 13 | }; 14 | 15 | const landingReducer = (state = initialLandingState, action) => { 16 | switch (action.type) { 17 | case LANDING_PREV_PAGE: 18 | return { ...state, index: Math.max(state.index - 1, 0) }; 19 | case LANDING_NEXT_PAGE: 20 | return { ...state, index: Math.min(state.index + 1, state.pagesCount - 1) }; 21 | case LANDING_LAST_PAGE: 22 | return { ...state, index: state.pagesCount - 1 }; 23 | case LANDING_FIRST_PAGE: 24 | return { ...state, index: 0 }; 25 | case LANDING_SET_PAGES: 26 | return { ...state, pagesCount: action.payload.pagesCount, index: 0, sectionsCount: action.payload.sectionsCount } 27 | default: 28 | return state; 29 | } 30 | }; 31 | 32 | export default landingReducer; 33 | -------------------------------------------------------------------------------- /src/common/redux/sagas/auth-saga.js: -------------------------------------------------------------------------------- 1 | import { all, call, fork, put, takeEvery } from 'redux-saga/effects'; 2 | import AuthAPI from '../../api/auth'; 3 | import { 4 | LOGIN_USER, 5 | VERIFY_ACCESS_TOKEN, 6 | REGISTER_USER, 7 | LOGOUT_USER, 8 | FORGOT_PASSWORD, 9 | RESET_PASSWORD, 10 | } from '../actions/types'; 11 | 12 | import { 13 | loginUserSuccess, 14 | loginUserError, 15 | verifyAccessToken, 16 | verifyAccessTokenSuccess, 17 | verifyAccessTokenError, 18 | registerUserSuccess, 19 | registerUserError, 20 | forgotPasswordSuccess, 21 | forgotPasswordError, 22 | resetPasswordSuccess, 23 | resetPasswordError, 24 | } from '../actions/auth-actions'; 25 | 26 | export function* watchLoginUser() { 27 | yield takeEvery(LOGIN_USER, loginWithEmailPassword); 28 | } 29 | 30 | const loginWithEmailPasswordAsync = async (email, password) => 31 | await AuthAPI.signInWithEmailAndPassword(email, password); 32 | 33 | function* loginWithEmailPassword({ payload }) { 34 | const { email, password } = payload.loginUserDto; 35 | const { history } = payload; 36 | AuthAPI.removeAccessToken(); 37 | try { 38 | yield call(loginWithEmailPasswordAsync, email, password); 39 | yield put(loginUserSuccess()); 40 | yield put(verifyAccessToken(history)); 41 | } catch (error) { 42 | yield put(loginUserError(error)); 43 | } 44 | } 45 | 46 | export function* watchVerifyAccessToken() { 47 | yield takeEvery(VERIFY_ACCESS_TOKEN, verifyAccessTokenNow); 48 | } 49 | 50 | const verifyAccessTokenAsync = async () => 51 | await AuthAPI.verifyAccessToken(); 52 | 53 | function* verifyAccessTokenNow({ payload }) { 54 | const { history, forceRedirect } = payload; 55 | try { 56 | const { user, message } = yield call(verifyAccessTokenAsync); 57 | if (user) { 58 | yield put(verifyAccessTokenSuccess(user)); 59 | if (forceRedirect) { 60 | history.replace(AuthAPI.getDefaultRedirectPath()); 61 | } 62 | } else { 63 | yield put(verifyAccessTokenError(message)); 64 | } 65 | } catch (error) { 66 | yield put(verifyAccessTokenError(error)); 67 | } 68 | } 69 | 70 | export function* watchRegisterUser() { 71 | yield takeEvery(REGISTER_USER, registerWithEmailPassword); 72 | } 73 | 74 | const registerWithEmailPasswordAsync = async (email, password) => 75 | await AuthAPI 76 | .createUserWithEmailAndPassword(email, password) 77 | .then(successResponse => successResponse) 78 | .catch(error => error); 79 | 80 | function* registerWithEmailPassword({ payload }) { 81 | const { email, password } = payload.registerUserDto; 82 | const { history } = payload; 83 | try { 84 | const registerUser = yield call( 85 | registerWithEmailPasswordAsync, 86 | email, 87 | password 88 | ); 89 | if (!registerUser.success) { 90 | yield put(registerUserSuccess()); 91 | history.push('/auth/login'); 92 | } else { 93 | yield put(registerUserError(registerUser.message)); 94 | } 95 | } catch (error) { 96 | yield put(registerUserError(error)); 97 | } 98 | } 99 | 100 | export function* watchLogoutUser() { 101 | yield takeEvery(LOGOUT_USER, logout); 102 | } 103 | 104 | const logoutAsync = async (history) => { 105 | // await AuthAPI 106 | // .signOut() 107 | // .then(succeessResponse => succeessResponse) 108 | // .catch(error => error); 109 | AuthAPI.removeAccessToken(); 110 | history.replace('/'); 111 | }; 112 | 113 | function* logout({ payload }) { 114 | const { history } = payload; 115 | try { 116 | yield call(logoutAsync, history); 117 | } catch (error) { } 118 | } 119 | 120 | export function* watchForgotPassword() { 121 | yield takeEvery(FORGOT_PASSWORD, forgotPassword); 122 | } 123 | 124 | const forgotPasswordAsync = async (email) => { 125 | return await AuthAPI 126 | .sendPasswordResetEmail(email) 127 | .then(successResponse => successResponse) 128 | .catch(error => error); 129 | }; 130 | 131 | function* forgotPassword({ payload }) { 132 | const { email } = payload.forgotPasswordDto; 133 | try { 134 | const forgotPasswordStatus = yield call(forgotPasswordAsync, email); 135 | if (!forgotPasswordStatus.success) { 136 | yield put(forgotPasswordSuccess(email)); 137 | } else { 138 | yield put(forgotPasswordError(forgotPasswordStatus.message)); 139 | } 140 | } catch (error) { 141 | yield put(forgotPasswordError(error)); 142 | } 143 | } 144 | 145 | export function* watchResetPassword() { 146 | yield takeEvery(RESET_PASSWORD, resetPassword); 147 | } 148 | 149 | const resetPasswordAsync = async (resetPasswordCode, newPassword) => { 150 | return await AuthAPI 151 | .confirmPasswordReset(resetPasswordCode, newPassword) 152 | .then(successResponse => successResponse) 153 | .catch((error) => error); 154 | }; 155 | 156 | function* resetPassword({ payload }) { 157 | const { password } = payload.resetPasswordDto; 158 | const { history } = payload; 159 | try { 160 | const resetPasswordStatus = yield call(resetPasswordAsync, password); 161 | if (!resetPasswordStatus.success) { 162 | yield put(resetPasswordSuccess()); 163 | history.push('/auth/login'); 164 | } else { 165 | yield put(resetPasswordError(resetPasswordStatus.message)); 166 | } 167 | } catch (error) { 168 | yield put(resetPasswordError(error)); 169 | } 170 | } 171 | 172 | export default function* rootSaga() { 173 | yield all([ 174 | fork(watchLoginUser), 175 | fork(watchVerifyAccessToken), 176 | fork(watchLogoutUser), 177 | fork(watchRegisterUser), 178 | fork(watchForgotPassword), 179 | fork(watchResetPassword), 180 | ]); 181 | } 182 | -------------------------------------------------------------------------------- /src/common/redux/sagas/index.js: -------------------------------------------------------------------------------- 1 | import { all } from 'redux-saga/effects'; 2 | import authSagas from './auth-saga'; 3 | 4 | export default function* rootSaga(getState) { 5 | yield all([ 6 | authSagas(), 7 | ]); 8 | } 9 | -------------------------------------------------------------------------------- /src/common/redux/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware, compose } from 'redux'; 2 | import createSagaMiddleware from 'redux-saga'; 3 | 4 | import rootReducer from './reducers'; 5 | import sagas from './sagas'; 6 | 7 | const sagaMiddleware = createSagaMiddleware(); 8 | const middlewares = [sagaMiddleware]; 9 | 10 | const store = createStore( 11 | rootReducer, 12 | compose(applyMiddleware(...middlewares)) 13 | ); 14 | 15 | sagaMiddleware.run(sagas) 16 | 17 | export default store; 18 | -------------------------------------------------------------------------------- /src/common/utils/theme.js: -------------------------------------------------------------------------------- 1 | import { ConstantNames } from '../constants/default-values'; 2 | import { UITheme } from '../enums/theme'; 3 | 4 | export const toggleDarkTheme = (isDarkTheme = false, forceRedirect = true) => { 5 | if (isDarkTheme) { 6 | localStorage.setItem(ConstantNames.UITheme, UITheme.Dark); 7 | } else if (!isDarkTheme) { 8 | localStorage.setItem(ConstantNames.UITheme, UITheme.Light); 9 | } 10 | if (forceRedirect) { 11 | window.location.reload(); 12 | } 13 | }; 14 | 15 | export const isDarkTheme = () => { 16 | return localStorage.getItem(ConstantNames.UITheme) === UITheme.Dark; 17 | }; 18 | -------------------------------------------------------------------------------- /src/components/common/spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'react-bootstrap'; 3 | 4 | export const LoadingSpinner = () => { 5 | return (); 6 | }; 7 | 8 | LoadingSpinner.propTypes = {}; 9 | LoadingSpinner.defaultProps = {}; 10 | -------------------------------------------------------------------------------- /src/components/common/switch.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import classNames from 'classnames'; 3 | import PropTypes from 'prop-types'; 4 | 5 | export const CustomSwitch = ({ size, label, color, value, onChange, className }) => { 6 | const [id, setId] = useState(''); 7 | useEffect(() => { 8 | setId(String(Date.now()).toLowerCase()); 9 | }, []); 10 | 11 | return ( 12 |
18 | 19 | 20 | 21 |
22 | ); 23 | }; 24 | 25 | CustomSwitch.propTypes = { 26 | size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']), 27 | color: PropTypes.oneOf(['primary', 'success', 'info', 'warning', 'danger']), 28 | label: PropTypes.string, 29 | value: PropTypes.bool, 30 | onChange: PropTypes.func, 31 | className: PropTypes.string 32 | }; 33 | CustomSwitch.defaultProps = { 34 | size: 'md', 35 | color: 'primary', 36 | label: '', 37 | value: false, 38 | onChange: () => {}, 39 | className: '' 40 | }; 41 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { defaultTheme, ConstantNames } from './common/constants/default-values'; 2 | import { UITheme } from './common/enums/theme'; 3 | 4 | const themes = Object.values(UITheme); 5 | 6 | const previousUITheme = localStorage.getItem(ConstantNames.UITheme); 7 | const currentUITheme = (previousUITheme && themes.includes(previousUITheme)) ? previousUITheme : defaultTheme; 8 | localStorage.setItem(ConstantNames.UITheme, currentUITheme); 9 | 10 | const render = () => { 11 | import(`./assets/scss/themes/${String(currentUITheme).toLocaleLowerCase()}.scss`).then(() => { 12 | require('./common/api/configuration'); 13 | require('./AppRenderer'); 14 | }); 15 | }; 16 | 17 | render(); 18 | -------------------------------------------------------------------------------- /src/layouts/admin.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { Nav, Navbar, NavDropdown } from 'react-bootstrap'; 3 | import { 4 | Switch, 5 | Route, 6 | Redirect, 7 | withRouter 8 | } from 'react-router-dom'; 9 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 10 | import { faUser } from '@fortawesome/free-solid-svg-icons' 11 | 12 | import AdminDashboard from '../pages/admin/dashboard'; 13 | import { CustomSwitch } from '../components/common/switch'; 14 | import { connectAuth } from '../common/redux/connects'; 15 | import { isDarkTheme, toggleDarkTheme } from '../common/utils/theme'; 16 | 17 | function AdminLayout({ match, history, logoutUserAction }) { 18 | const [darkTheme, setDarkTheme] = useState(isDarkTheme()); 19 | 20 | return (
21 | 22 | 23 | history.push('/')}>Welcome to Silver IT 24 | 25 | 26 | 27 | 40 | 41 | 42 | 43 | 44 | 45 |
User Management
46 | 47 | 48 | 49 | 50 | 51 |
); 52 | }; 53 | 54 | export default withRouter(connectAuth(AdminLayout)); -------------------------------------------------------------------------------- /src/layouts/anonymous.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { 3 | Switch, 4 | Route, 5 | Redirect, 6 | withRouter 7 | } from 'react-router-dom'; 8 | import { Nav, Navbar } from 'react-bootstrap'; 9 | 10 | import LandingPage from '../pages/landing'; 11 | import LoginPage from '../pages/auth/login'; 12 | import ForgotPasswordPage from '../pages/auth/forgot-password'; 13 | import ResetPasswordPage from '../pages/auth/reset-password'; 14 | import RegisterPage from '../pages/auth/register'; 15 | import { CustomSwitch } from '../components/common/switch'; 16 | import { connectAuth } from '../common/redux/connects'; 17 | import { isDarkTheme, toggleDarkTheme } from '../common/utils/theme'; 18 | import AuthAPI from '../common/api/auth'; 19 | 20 | function AnonymousLayout({ authenticated, history, logoutUserAction }) { 21 | const [darkTheme, setDarkTheme] = useState(isDarkTheme()); 22 | 23 | return (
24 | 25 | 26 | history.push('/')}>Welcome to Silver IT 27 | 28 | 29 | 30 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | ); 59 | }; 60 | 61 | export default withRouter(connectAuth(AnonymousLayout)); -------------------------------------------------------------------------------- /src/layouts/customer.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Nav, Navbar, NavDropdown } from 'react-bootstrap'; 3 | import { 4 | Switch, 5 | Route, 6 | Redirect, 7 | withRouter 8 | } from 'react-router-dom'; 9 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 10 | import { faUser } from '@fortawesome/free-solid-svg-icons' 11 | 12 | import CustomerDashboard from '../pages/customer/dashboard'; 13 | import { CustomSwitch } from '../components/common/switch'; 14 | import { connectAuth } from '../common/redux/connects'; 15 | import { isDarkTheme, toggleDarkTheme } from '../common/utils/theme'; 16 | 17 | function CustomerLayout({ match, history, logoutUserAction }) { 18 | const [darkTheme, setDarkTheme] = useState(isDarkTheme()); 19 | 20 | return (
21 | 22 | 23 | history.push('/')}>Welcome to Silver IT 24 | 25 | 26 | 27 | 40 | 41 | 42 | 43 | 44 | 45 |
User Management
46 | 47 | 48 | 49 | 50 | 51 |
); 52 | }; 53 | 54 | export default withRouter(connectAuth(CustomerLayout)); -------------------------------------------------------------------------------- /src/pages/admin/dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function AdminDashboard({ }) { 4 | 5 | return ( 6 |
7 | Admin Dashboard 8 |
9 | ); 10 | }; 11 | 12 | AdminDashboard.propTypes = {}; 13 | AdminDashboard.defaultProps = {}; 14 | 15 | export default AdminDashboard; 16 | -------------------------------------------------------------------------------- /src/pages/auth/forgot-password.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Button, 4 | Card, 5 | Form 6 | } from 'react-bootstrap'; 7 | import { withRouter } from 'react-router'; 8 | 9 | function ForgotPasswordPage({ history }) { 10 | return ( 11 |
12 | 13 | Forgot Password? 14 | 15 |
16 | 17 | Email address 18 | 19 | 20 | We'll send link to your email. 21 | 22 | 23 | 24 | 25 | 28 | 29 | 32 | 33 |
34 | 35 | 36 |
37 | ); 38 | }; 39 | 40 | export default withRouter(ForgotPasswordPage); 41 | -------------------------------------------------------------------------------- /src/pages/auth/login.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { 3 | Button, 4 | Card, 5 | Form 6 | } from 'react-bootstrap'; 7 | import { withRouter } from 'react-router'; 8 | 9 | import AuthAPI from '../../common/api/auth'; 10 | import { connectAuth } from '../../common/redux/connects'; 11 | 12 | function LoginPage({ user, loginUserAction, history }) { 13 | const [email, setEmail] = useState(''); 14 | const [password, setPassword] = useState(''); 15 | 16 | useEffect(() => { 17 | user && history.replace(AuthAPI.getDefaultRedirectPath()); 18 | }, [user]) 19 | 20 | return ( 21 |
22 | 23 | Login 24 | 25 |
26 | 27 | Email address 28 | setEmail(e.target.value)} /> 29 | 30 | We'll never share your email with anyone else. 31 | 32 | 33 | 34 | 35 | Password 36 | setPassword(e.target.value)} 37 | onKeyPress={event => (event.key === 'Enter') && loginUserAction({ email, password }, history)} /> 38 | 39 | history.push('/auth/forgot-password')}>Fotgot password? 40 | 41 | 42 | 43 | 44 | 47 | 48 | 49 | 50 |
51 | 52 | history.push('/auth/register')}>Register now 53 | 54 | 55 |
56 | 57 | 58 |
59 | ); 60 | }; 61 | 62 | export default withRouter(connectAuth(LoginPage)); 63 | 64 | -------------------------------------------------------------------------------- /src/pages/auth/register.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Button, 4 | Card, 5 | Form 6 | } from 'react-bootstrap'; 7 | import { withRouter } from 'react-router'; 8 | 9 | function RegisterPage({ history }) { 10 | return ( 11 |
12 | 13 | Login 14 | 15 |
16 | 17 | Email address 18 | 19 | 20 | We'll never share your email with anyone else. 21 | 22 | 23 | 24 | 25 | Password 26 | 27 | 28 | Type your password. Preferable a secure combination. 29 | 30 | 31 | 32 | 33 | Confirm Password 34 | 35 | 36 | Confirm your password. 37 | 38 | 39 | 40 | 41 | 44 | 45 | 46 | 47 |
48 | 49 | history.push('/auth/login')}>Already registered? 50 | 51 | 52 |
53 | 54 | 55 |
56 | ); 57 | }; 58 | 59 | export default withRouter(RegisterPage); 60 | -------------------------------------------------------------------------------- /src/pages/auth/reset-password.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Button, 4 | Card, 5 | Form 6 | } from 'react-bootstrap'; 7 | import { withRouter } from 'react-router'; 8 | 9 | function ResetPasswordPage({ history }) { 10 | return ( 11 |
12 | 13 | Reset Password 14 | 15 |
16 | 17 | Password 18 | 19 | 20 | Type your password. Preferable a secure combination. 21 | 22 | 23 | 24 | 25 | Confirm Password 26 | 27 | 28 | Confirm your password. 29 | 30 | 31 | 32 | 33 | 36 | 37 |
38 | 39 | 40 |
41 | ); 42 | }; 43 | 44 | export default withRouter(ResetPasswordPage); 45 | -------------------------------------------------------------------------------- /src/pages/customer/dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function CustomerDashboard({ }) { 4 | 5 | return ( 6 |
7 | Customer Dashboard 8 |
9 | ); 10 | }; 11 | 12 | CustomerDashboard.propTypes = {}; 13 | CustomerDashboard.defaultProps = {}; 14 | 15 | export default CustomerDashboard; 16 | -------------------------------------------------------------------------------- /src/pages/landing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function LandingPage() { 4 | return ( 5 |
6 | Landing Page 7 |
8 | ); 9 | }; 10 | 11 | LandingPage.propTypes = {}; 12 | LandingPage.defaultProps = {}; 13 | 14 | export default LandingPage; 15 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------