├── .env
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── package.json
├── pm2.json
├── public
    ├── assets
    │   └── images
    │   │   ├── bg-main.png
    │   │   ├── bg-sidebar.jpg
    │   │   ├── img-icon-success.svg
    │   │   └── logo.png
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── server.js
└── src
    ├── component
        ├── FormInput
        │   ├── index.js
        │   └── style.scss
        ├── Header
        │   └── index.js
        ├── Modal
        │   ├── ModalSuccessWrapper.js
        │   └── index.js
        ├── PoolKyc
        │   └── index.js
        ├── Sidebar
        │   └── index.js
        └── index.js
    ├── feature
        ├── App
        │   ├── Container.js
        │   ├── Routes.js
        │   ├── api.js
        │   └── index.js
        ├── ChangePassword
        │   ├── Container.js
        │   ├── api.js
        │   ├── component
        │   │   ├── Form
        │   │   │   ├── index.js
        │   │   │   └── validation.js
        │   │   └── Modal
        │   │   │   ├── ModalSuccess.js
        │   │   │   └── index.js
        │   └── index.js
        ├── ForgotPassword
        │   ├── Container.js
        │   ├── api.js
        │   ├── component
        │   │   ├── ForgotForm
        │   │   │   ├── index.js
        │   │   │   └── validation.js
        │   │   └── Modal
        │   │   │   ├── ModalSuccess.js
        │   │   │   └── index.js
        │   └── index.js
        ├── Kyc
        │   ├── Container.js
        │   ├── api.js
        │   ├── component
        │   │   └── KycFormRender
        │   │   │   └── index.js
        │   ├── index.js
        │   ├── redux
        │   │   ├── action.js
        │   │   └── reducer.js
        │   ├── style.scss
        │   └── util.js
        ├── Loading
        │   ├── Container.js
        │   ├── index.js
        │   ├── redux
        │   │   ├── action.js
        │   │   └── reducer.js
        │   └── style.scss
        ├── Login
        │   ├── Container.js
        │   ├── api.js
        │   ├── component
        │   │   ├── LoginForm
        │   │   │   ├── index.js
        │   │   │   └── validation.js
        │   │   └── Modal
        │   │   │   ├── ModalFails.js
        │   │   │   └── index.js
        │   ├── index.js
        │   └── redux
        │   │   ├── action.js
        │   │   └── reducer.js
        ├── Profile
        │   ├── Container.js
        │   └── index.js
        ├── Register
        │   ├── Container.js
        │   ├── api.js
        │   ├── component
        │   │   ├── Modal
        │   │   │   ├── ModalSuccess.js
        │   │   │   └── index.js
        │   │   └── RegisterForm
        │   │   │   ├── index.js
        │   │   │   └── validation.js
        │   └── index.js
        ├── ResetPassword
        │   ├── Container.js
        │   ├── api.js
        │   ├── component
        │   │   ├── Modal
        │   │   │   ├── ModalSuccess.js
        │   │   │   └── index.js
        │   │   └── ResetForm
        │   │   │   ├── index.js
        │   │   │   └── validation.js
        │   └── index.js
        └── index.js
    ├── index.js
    ├── lib
        ├── PoolKyc
        │   └── index.js
        ├── helper.js
        └── validation.js
    ├── reducer.js
    ├── scss
        ├── components
        │   ├── _component.activities.scss
        │   ├── _component.button.scss
        │   ├── _component.card.scss
        │   ├── _component.form.scss
        │   ├── _component.header.scss
        │   ├── _component.heading.scss
        │   ├── _component.loading.scss
        │   ├── _component.modal.scss
        │   ├── _component.panel.scss
        │   ├── _component.row.scss
        │   ├── _component.sidebar.scss
        │   └── _component.text.scss
        ├── elements
        │   ├── _element.link.scss
        │   └── _element.page.scss
        ├── generics
        │   ├── _generic.box-sizing.scss
        │   ├── _generic.normalize.scss
        │   └── _generic.reset.scss
        ├── index.scss
        ├── objects
        │   └── _objects.container.scss
        ├── settings
        │   └── _settings.core.scss
        ├── tools
        │   └── _tools.font-family.scss
        └── utilities
        │   ├── _utilities.hidden.scss
        │   └── _utilities.margin.scss
    ├── service
        ├── index.js
        ├── kycHttp.js
        └── urlApi.js
    └── serviceWorker.js


/.env:
--------------------------------------------------------------------------------
1 | PORT=9000
2 | NODE_PATH=src/
3 | KYC_API=http://localhost:3032/api/customer/
4 | USER_STORAGE=user
5 | COOKIE_NAME=__sid


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | !.eslintrc.js
2 | **/node_modules/*
3 | /public/plugins
4 | 
5 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     jest: true,
 5 |   },
 6 |   settings: {
 7 |     'import/resolver': {
 8 |       node: {
 9 |         paths: ['src'],
10 |       },
11 |     },
12 |   },
13 |   extends: ['airbnb'],
14 |   parser: 'babel-eslint',
15 |   globals: {
16 |     document: true,
17 |     window: true,
18 |   },
19 |   rules: {
20 |     no_underscore_dangle: 0,
21 |     strict: 0,
22 |     'no-unused-vars': 1,
23 |     'no-nested-ternary': 0,
24 |     'no-console': 0,
25 |     'no-shadow': 0,
26 |     'object-curly-newline': 0,
27 |     'global-require': 0,
28 |     'new-cap': 0,
29 |     'function-paren-newline': 0,
30 |     'guard-for-in': 0,
31 |     'max-len': 0,
32 |     'class-methods-use-this': 0,
33 |     'react/jsx-filename-extension': 0,
34 |     'react/prefer-stateless-function': 0,
35 |     'react/forbid-prop-types': 0,
36 |     'jsx-a11y/label-has-for': 0,
37 |     'import/prefer-default-export': 0,
38 |     'import/no-extraneous-dependencies': 0,
39 |     'import/imports-first': 0,
40 |     'operator-linebreak': ['off'],
41 |     'implicit-arrow-linebreak': ['off'],
42 |     'arrow-parens': ['off'],
43 |   },
44 |   parserOptions: {
45 |     ecmaFeatures: {
46 |       legacyDecorators: true,
47 |     },
48 |   },
49 | };
50 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | 
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | package-lock.json
19 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "trailingComma": "all",
4 |   "tabWidth": 2,
5 |   "semi": true,
6 |   "printWidth": 150
7 | }
8 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.',
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | const dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach((dotenvFile) => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       }),
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |         KYC_API: process.env.KYC_API,
81 |         USER_STORAGE: process.env.USER_STORAGE,
82 |         PORT: process.env.PORT,
83 |         COOKIE_NAME: process.env.COOKIE_NAME,
84 |       },
85 |     );
86 |   // Stringify all values so we can feed into Webpack DefinePlugin
87 |   const stringified = {
88 |     'process.env': Object.keys(raw).reduce((env, key) => {
89 |       env[key] = JSON.stringify(raw[key]);
90 |       return env;
91 |     }, {}),
92 |   };
93 | 
94 |   return { raw, stringified };
95 | }
96 | 
97 | module.exports = getClientEnvironment;
98 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/en/webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     const assetFilename = JSON.stringify(path.basename(filename));
11 | 
12 |     if (filename.match(/\.svg$/)) {
13 |       return `module.exports = {
14 |         __esModule: true,
15 |         default: ${assetFilename},
16 |         ReactComponent: (props) => ({
17 |           $$typeof: Symbol.for('react.element'),
18 |           type: 'svg',
19 |           ref: null,
20 |           key: null,
21 |           props: Object.assign({}, props, {
22 |             children: ${assetFilename}
23 |           })
24 |         }),
25 |       };`;
26 |     }
27 | 
28 |     return `module.exports = ${assetFilename};`;
29 |   },
30 | };
31 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appPath: resolveApp('.'),
45 |   appBuild: resolveApp('build'),
46 |   appPublic: resolveApp('public'),
47 |   appHtml: resolveApp('public/index.html'),
48 |   appIndexJs: resolveApp('src/index.js'),
49 |   appPackageJson: resolveApp('package.json'),
50 |   appSrc: resolveApp('src'),
51 |   yarnLockFile: resolveApp('yarn.lock'),
52 |   testsSetup: resolveApp('src/setupTests.js'),
53 |   proxySetup: resolveApp('src/setupProxy.js'),
54 |   appNodeModules: resolveApp('node_modules'),
55 |   publicUrl: getPublicUrl(resolveApp('package.json')),
56 |   servedPath: getServedPath(resolveApp('package.json')),
57 | };
58 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const path = require('path');
  4 | const webpack = require('webpack');
  5 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 11 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 12 | const ManifestPlugin = require('webpack-manifest-plugin');
 13 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 14 | const paths = require('./paths');
 15 | const getClientEnvironment = require('./env');
 16 | 
 17 | // Webpack uses `publicPath` to determine where the app is being served from.
 18 | // In development, we always serve from the root. This makes config easier.
 19 | const publicPath = '/';
 20 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 21 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 22 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 23 | const publicUrl = '';
 24 | // Get environment variables to inject into our app.
 25 | const env = getClientEnvironment(publicUrl);
 26 | 
 27 | // style files regexes
 28 | const cssRegex = /\.css$/;
 29 | const cssModuleRegex = /\.module\.css$/;
 30 | const sassRegex = /\.(scss|sass)$/;
 31 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 32 | 
 33 | // common function to get style loaders
 34 | const getStyleLoaders = (cssOptions, preProcessor) => {
 35 |   const loaders = [
 36 |     require.resolve('style-loader'),
 37 |     {
 38 |       loader: require.resolve('css-loader'),
 39 |       options: cssOptions,
 40 |     },
 41 |     {
 42 |       // Options for PostCSS as we reference these options twice
 43 |       // Adds vendor prefixing based on your specified browser support in
 44 |       // package.json
 45 |       loader: require.resolve('postcss-loader'),
 46 |       options: {
 47 |         // Necessary for external CSS imports to work
 48 |         // https://github.com/facebook/create-react-app/issues/2677
 49 |         ident: 'postcss',
 50 |         plugins: () => [
 51 |           require('postcss-flexbugs-fixes'),
 52 |           require('postcss-preset-env')({
 53 |             autoprefixer: {
 54 |               flexbox: 'no-2009',
 55 |             },
 56 |             stage: 3,
 57 |           }),
 58 |         ],
 59 |       },
 60 |     },
 61 |   ];
 62 |   if (preProcessor) {
 63 |     loaders.push(require.resolve(preProcessor));
 64 |   }
 65 |   return loaders;
 66 | };
 67 | 
 68 | // This is the development configuration.
 69 | // It is focused on developer experience and fast rebuilds.
 70 | // The production configuration is different and lives in a separate file.
 71 | module.exports = {
 72 |   mode: 'development',
 73 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 74 |   // See the discussion in https://github.com/facebook/create-react-app/issues/343
 75 |   devtool: 'cheap-module-source-map',
 76 |   // These are the "entry points" to our application.
 77 |   // This means they will be the "root" imports that are included in JS bundle.
 78 |   entry: [
 79 |     // Include an alternative client for WebpackDevServer. A client's job is to
 80 |     // connect to WebpackDevServer by a socket and get notified about changes.
 81 |     // When you save a file, the client will either apply hot updates (in case
 82 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 83 |     // make a syntax error, this client will display a syntax error overlay.
 84 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 85 |     // to bring better experience for Create React App users. You can replace
 86 |     // the line below with these two lines if you prefer the stock client:
 87 |     // require.resolve('webpack-dev-server/client') + '?/',
 88 |     // require.resolve('webpack/hot/dev-server'),
 89 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 90 |     // Finally, this is your app's code:
 91 |     paths.appIndexJs,
 92 |     // We include the app code last so that if there is a runtime error during
 93 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 94 |     // changing JS code would still trigger a refresh.
 95 |   ],
 96 |   output: {
 97 |     // Add /* filename */ comments to generated require()s in the output.
 98 |     pathinfo: true,
 99 |     // This does not produce a real file. It's just the virtual path that is
100 |     // served by WebpackDevServer in development. This is the JS bundle
101 |     // containing code from all our entry points, and the Webpack runtime.
102 |     filename: 'static/js/bundle.js',
103 |     // There are also additional JS chunk files if you use code splitting.
104 |     chunkFilename: 'static/js/[name].chunk.js',
105 |     // This is the URL that app is served from. We use "/" in development.
106 |     publicPath,
107 |     // Point sourcemap entries to original disk location (format as URL on Windows)
108 |     devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
109 |   },
110 |   optimization: {
111 |     // Automatically split vendor and commons
112 |     // https://twitter.com/wSokra/status/969633336732905474
113 |     // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
114 |     splitChunks: {
115 |       chunks: 'all',
116 |       name: false,
117 |     },
118 |     // Keep the runtime chunk seperated to enable long term caching
119 |     // https://twitter.com/wSokra/status/969679223278505985
120 |     runtimeChunk: true,
121 |   },
122 |   resolve: {
123 |     // This allows you to set a fallback for where Webpack should look for modules.
124 |     // We placed these paths second because we want `node_modules` to "win"
125 |     // if there are any conflicts. This matches Node resolution mechanism.
126 |     // https://github.com/facebook/create-react-app/issues/253
127 |     modules: ['node_modules'].concat(
128 |       // It is guaranteed to exist because we tweak it in `env.js`
129 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
130 |     ),
131 |     // These are the reasonable defaults supported by the Node ecosystem.
132 |     // We also include JSX as a common component filename extension to support
133 |     // some tools, although we do not recommend using it, see:
134 |     // https://github.com/facebook/create-react-app/issues/290
135 |     // `web` extension prefixes have been added for better support
136 |     // for React Native Web.
137 |     extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
138 |     alias: {
139 |       // Support React Native Web
140 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
141 |       'react-native': 'react-native-web',
142 |     },
143 |     plugins: [
144 |       // Adds support for installing with Plug'n'Play, leading to faster installs and adding
145 |       // guards against forgotten dependencies and such.
146 |       PnpWebpackPlugin,
147 |       // Prevents users from importing files from outside of src/ (or node_modules/).
148 |       // This often causes confusion because we only process files within src/ with babel.
149 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
150 |       // please link the files into your node_modules/ and let module-resolution kick in.
151 |       // Make sure your source files are compiled, as they will not be processed in any way.
152 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
153 |     ],
154 |   },
155 |   resolveLoader: {
156 |     plugins: [
157 |       // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
158 |       // from the current package.
159 |       PnpWebpackPlugin.moduleLoader(module),
160 |     ],
161 |   },
162 |   module: {
163 |     strictExportPresence: true,
164 |     rules: [
165 |       // Disable require.ensure as it's not a standard language feature.
166 |       { parser: { requireEnsure: false } },
167 | 
168 |       // First, run the linter.
169 |       // It's important to do this before Babel processes the JS.
170 |       {
171 |         test: /\.(js|mjs|jsx)$/,
172 |         enforce: 'pre',
173 |         use: [
174 |           {
175 |             options: {
176 |               formatter: require.resolve('react-dev-utils/eslintFormatter'),
177 |               eslintPath: require.resolve('eslint'),
178 | 
179 |             },
180 |             loader: require.resolve('eslint-loader'),
181 |           },
182 |         ],
183 |         include: paths.appSrc,
184 |       },
185 |       {
186 |         // "oneOf" will traverse all following loaders until one will
187 |         // match the requirements. When no loader matches it will fall
188 |         // back to the "file" loader at the end of the loader list.
189 |         oneOf: [
190 |           // "url" loader works like "file" loader except that it embeds assets
191 |           // smaller than specified limit in bytes as data URLs to avoid requests.
192 |           // A missing `test` is equivalent to a match.
193 |           {
194 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
195 |             loader: require.resolve('url-loader'),
196 |             options: {
197 |               limit: 10000,
198 |               name: 'static/media/[name].[hash:8].[ext]',
199 |             },
200 |           },
201 |           // Process application JS with Babel.
202 |           // The preset includes JSX, Flow, and some ESnext features.
203 |           {
204 |             test: /\.(js|mjs|jsx)$/,
205 |             include: paths.appSrc,
206 |             loader: require.resolve('babel-loader'),
207 |             options: {
208 |               customize: require.resolve(
209 |                 'babel-preset-react-app/webpack-overrides',
210 |               ),
211 | 
212 |               plugins: [
213 |                 [
214 |                   require.resolve('babel-plugin-named-asset-import'),
215 |                   {
216 |                     loaderMap: {
217 |                       svg: {
218 |                         ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
219 |                       },
220 |                     },
221 |                   },
222 |                 ],
223 |               ],
224 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
225 |               // It enables caching results in ./node_modules/.cache/babel-loader/
226 |               // directory for faster rebuilds.
227 |               cacheDirectory: true,
228 |               // Don't waste time on Gzipping the cache
229 |               cacheCompression: false,
230 |             },
231 |           },
232 |           // Process any JS outside of the app with Babel.
233 |           // Unlike the application JS, we only compile the standard ES features.
234 |           {
235 |             test: /\.(js|mjs)$/,
236 |             exclude: /@babel(?:\/|\\{1,2})runtime/,
237 |             loader: require.resolve('babel-loader'),
238 |             options: {
239 |               babelrc: false,
240 |               configFile: false,
241 |               compact: false,
242 |               presets: [
243 |                 [
244 |                   require.resolve('babel-preset-react-app/dependencies'),
245 |                   { helpers: true },
246 |                 ],
247 |               ],
248 |               cacheDirectory: true,
249 |               // Don't waste time on Gzipping the cache
250 |               cacheCompression: false,
251 | 
252 |               // If an error happens in a package, it's possible to be
253 |               // because it was compiled. Thus, we don't want the browser
254 |               // debugger to show the original code. Instead, the code
255 |               // being evaluated would be much more helpful.
256 |               sourceMaps: false,
257 |             },
258 |           },
259 |           // "postcss" loader applies autoprefixer to our CSS.
260 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
261 |           // "style" loader turns CSS into JS modules that inject <style> tags.
262 |           // In production, we use a plugin to extract that CSS to a file, but
263 |           // in development "style" loader enables hot editing of CSS.
264 |           // By default we support CSS Modules with the extension .module.css
265 |           {
266 |             test: cssRegex,
267 |             exclude: cssModuleRegex,
268 |             use: getStyleLoaders({
269 |               importLoaders: 1,
270 |             }),
271 |           },
272 |           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
273 |           // using the extension .module.css
274 |           {
275 |             test: cssModuleRegex,
276 |             use: getStyleLoaders({
277 |               importLoaders: 1,
278 |               modules: true,
279 |               getLocalIdent: getCSSModuleLocalIdent,
280 |             }),
281 |           },
282 |           // Opt-in support for SASS (using .scss or .sass extensions).
283 |           // Chains the sass-loader with the css-loader and the style-loader
284 |           // to immediately apply all styles to the DOM.
285 |           // By default we support SASS Modules with the
286 |           // extensions .module.scss or .module.sass
287 |           {
288 |             test: sassRegex,
289 |             exclude: sassModuleRegex,
290 |             use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
291 |           },
292 |           // Adds support for CSS Modules, but using SASS
293 |           // using the extension .module.scss or .module.sass
294 |           {
295 |             test: sassModuleRegex,
296 |             use: getStyleLoaders(
297 |               {
298 |                 importLoaders: 2,
299 |                 modules: true,
300 |                 getLocalIdent: getCSSModuleLocalIdent,
301 |               },
302 |               'sass-loader',
303 |             ),
304 |           },
305 |           // "file" loader makes sure those assets get served by WebpackDevServer.
306 |           // When you `import` an asset, you get its (virtual) filename.
307 |           // In production, they would get copied to the `build` folder.
308 |           // This loader doesn't use a "test" so it will catch all modules
309 |           // that fall through the other loaders.
310 |           {
311 |             // Exclude `js` files to keep "css" loader working as it injects
312 |             // its runtime that would otherwise be processed through "file" loader.
313 |             // Also exclude `html` and `json` extensions so they get processed
314 |             // by webpacks internal loaders.
315 |             exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/],
316 |             loader: require.resolve('file-loader'),
317 |             options: {
318 |               name: 'static/media/[name].[hash:8].[ext]',
319 |             },
320 |           },
321 |         ],
322 |       },
323 |       // ** STOP ** Are you adding a new loader?
324 |       // Make sure to add the new loader(s) before the "file" loader.
325 |     ],
326 |   },
327 |   plugins: [
328 |     // Generates an `index.html` file with the <script> injected.
329 |     new HtmlWebpackPlugin({
330 |       inject: true,
331 |       template: paths.appHtml,
332 |     }),
333 |     // Makes some environment variables available in index.html.
334 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
335 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
336 |     // In development, this will be an empty string.
337 |     new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
338 |     // This gives some necessary context to module not found errors, such as
339 |     // the requesting resource.
340 |     new ModuleNotFoundPlugin(paths.appPath),
341 |     // Makes some environment variables available to the JS code, for example:
342 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
343 |     new webpack.DefinePlugin(env.stringified),
344 |     // This is necessary to emit hot updates (currently CSS only):
345 |     new webpack.HotModuleReplacementPlugin(),
346 |     // Watcher doesn't work well if you mistype casing in a path so we use
347 |     // a plugin that prints an error when you attempt to do this.
348 |     // See https://github.com/facebook/create-react-app/issues/240
349 |     new CaseSensitivePathsPlugin(),
350 |     // If you require a missing module and then `npm install` it, you still have
351 |     // to restart the development server for Webpack to discover it. This plugin
352 |     // makes the discovery automatic so you don't have to restart.
353 |     // See https://github.com/facebook/create-react-app/issues/186
354 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
355 |     // Moment.js is an extremely popular library that bundles large locale files
356 |     // by default due to how Webpack interprets its code. This is a practical
357 |     // solution that requires the user to opt into importing specific locales.
358 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
359 |     // You can remove this if you don't use Moment.js:
360 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
361 |     // Generate a manifest file which contains a mapping of all asset filenames
362 |     // to their corresponding output file so that tools can pick it up without
363 |     // having to parse `index.html`.
364 |     new ManifestPlugin({
365 |       fileName: 'asset-manifest.json',
366 |       publicPath,
367 |     }),
368 |   ],
369 | 
370 |   // Some libraries import Node modules but don't use them in the browser.
371 |   // Tell Webpack to provide empty mocks for them so importing them works.
372 |   node: {
373 |     dgram: 'empty',
374 |     fs: 'empty',
375 |     net: 'empty',
376 |     tls: 'empty',
377 |     child_process: 'empty',
378 |   },
379 |   // Turn off performance processing because we utilize
380 |   // our own hints via the FileSizeReporter
381 |   performance: false,
382 | };
383 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const path = require('path');
  4 | const webpack = require('webpack');
  5 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
  8 | const TerserPlugin = require('terser-webpack-plugin');
  9 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 10 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 11 | const safePostCssParser = require('postcss-safe-parser');
 12 | const ManifestPlugin = require('webpack-manifest-plugin');
 13 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 14 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 15 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 16 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 17 | const paths = require('./paths');
 18 | const getClientEnvironment = require('./env');
 19 | const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 20 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 21 | 
 22 | // Webpack uses `publicPath` to determine where the app is being served from.
 23 | // It requires a trailing slash, or the file assets will get an incorrect path.
 24 | const publicPath = paths.servedPath;
 25 | // Some apps do not use client-side routing with pushState.
 26 | // For these, "homepage" can be set to "." to enable relative asset paths.
 27 | const shouldUseRelativeAssetPaths = publicPath === './';
 28 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 29 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 30 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 31 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 32 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 33 | const publicUrl = publicPath.slice(0, -1);
 34 | // Get environment variables to inject into our app.
 35 | const env = getClientEnvironment(publicUrl);
 36 | 
 37 | // Assert this just to be safe.
 38 | // Development builds of React are slow and not intended for production.
 39 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 40 |   throw new Error('Production builds must have NODE_ENV=production.');
 41 | }
 42 | 
 43 | // style files regexes
 44 | const cssRegex = /\.css$/;
 45 | const cssModuleRegex = /\.module\.css$/;
 46 | const sassRegex = /\.(scss|sass)$/;
 47 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 48 | 
 49 | // common function to get style loaders
 50 | const getStyleLoaders = (cssOptions, preProcessor) => {
 51 |   const loaders = [
 52 |     {
 53 |       loader: MiniCssExtractPlugin.loader,
 54 |       options: Object.assign(
 55 |         {},
 56 |         shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
 57 |       ),
 58 |     },
 59 |     {
 60 |       loader: require.resolve('css-loader'),
 61 |       options: cssOptions,
 62 |     },
 63 |     {
 64 |       // Options for PostCSS as we reference these options twice
 65 |       // Adds vendor prefixing based on your specified browser support in
 66 |       // package.json
 67 |       loader: require.resolve('postcss-loader'),
 68 |       options: {
 69 |         // Necessary for external CSS imports to work
 70 |         // https://github.com/facebook/create-react-app/issues/2677
 71 |         ident: 'postcss',
 72 |         plugins: () => [
 73 |           require('postcss-flexbugs-fixes'),
 74 |           require('postcss-preset-env')({
 75 |             autoprefixer: {
 76 |               flexbox: 'no-2009',
 77 |             },
 78 |             stage: 3,
 79 |           }),
 80 |         ],
 81 |         sourceMap: shouldUseSourceMap,
 82 |       },
 83 |     },
 84 |   ];
 85 |   if (preProcessor) {
 86 |     loaders.push({
 87 |       loader: require.resolve(preProcessor),
 88 |       options: {
 89 |         sourceMap: shouldUseSourceMap,
 90 |       },
 91 |     });
 92 |   }
 93 |   return loaders;
 94 | };
 95 | 
 96 | // This is the production configuration.
 97 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 98 | // The development configuration is different and lives in a separate file.
 99 | module.exports = {
100 |   mode: 'production',
101 |   // Don't attempt to continue if there are any errors.
102 |   bail: true,
103 |   // We generate sourcemaps in production. This is slow but gives good results.
104 |   // You can exclude the *.map files from the build during deployment.
105 |   devtool: shouldUseSourceMap ? 'source-map' : false,
106 |   // In production, we only want to load the app code.
107 |   entry: [paths.appIndexJs],
108 |   output: {
109 |     // The build folder.
110 |     path: paths.appBuild,
111 |     // Generated JS file names (with nested folders).
112 |     // There will be one main bundle, and one file per asynchronous chunk.
113 |     // We don't currently advertise code splitting but Webpack supports it.
114 |     filename: 'static/js/[name].[chunkhash:8].js',
115 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
116 |     // We inferred the "public path" (such as / or /my-project) from homepage.
117 |     publicPath: publicPath,
118 |     // Point sourcemap entries to original disk location (format as URL on Windows)
119 |     devtoolModuleFilenameTemplate: info =>
120 |       path
121 |         .relative(paths.appSrc, info.absoluteResourcePath)
122 |         .replace(/\\/g, '/'),
123 |   },
124 |   optimization: {
125 |     minimizer: [
126 |       new TerserPlugin({
127 |         terserOptions: {
128 |           parse: {
129 |             // we want terser to parse ecma 8 code. However, we don't want it
130 |             // to apply any minfication steps that turns valid ecma 5 code
131 |             // into invalid ecma 5 code. This is why the 'compress' and 'output'
132 |             // sections only apply transformations that are ecma 5 safe
133 |             // https://github.com/facebook/create-react-app/pull/4234
134 |             ecma: 8,
135 |           },
136 |           compress: {
137 |             ecma: 5,
138 |             warnings: false,
139 |             // Disabled because of an issue with Uglify breaking seemingly valid code:
140 |             // https://github.com/facebook/create-react-app/issues/2376
141 |             // Pending further investigation:
142 |             // https://github.com/mishoo/UglifyJS2/issues/2011
143 |             comparisons: false,
144 |             // Disabled because of an issue with Terser breaking valid code:
145 |             // https://github.com/facebook/create-react-app/issues/5250
146 |             // Pending futher investigation:
147 |             // https://github.com/terser-js/terser/issues/120
148 |             inline: 2,
149 |           },
150 |           mangle: {
151 |             safari10: true,
152 |           },
153 |           output: {
154 |             ecma: 5,
155 |             comments: false,
156 |             // Turned on because emoji and regex is not minified properly using default
157 |             // https://github.com/facebook/create-react-app/issues/2488
158 |             ascii_only: true,
159 |           },
160 |         },
161 |         // Use multi-process parallel running to improve the build speed
162 |         // Default number of concurrent runs: os.cpus().length - 1
163 |         parallel: true,
164 |         // Enable file caching
165 |         cache: true,
166 |         sourceMap: shouldUseSourceMap,
167 |       }),
168 |       new OptimizeCSSAssetsPlugin({
169 |         cssProcessorOptions: {
170 |           parser: safePostCssParser,
171 |           map: shouldUseSourceMap
172 |             ? {
173 |                 // `inline: false` forces the sourcemap to be output into a
174 |                 // separate file
175 |                 inline: false,
176 |                 // `annotation: true` appends the sourceMappingURL to the end of
177 |                 // the css file, helping the browser find the sourcemap
178 |                 annotation: true,
179 |               }
180 |             : false,
181 |         },
182 |       }),
183 |     ],
184 |     // Automatically split vendor and commons
185 |     // https://twitter.com/wSokra/status/969633336732905474
186 |     // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
187 |     splitChunks: {
188 |       chunks: 'all',
189 |       name: false,
190 |     },
191 |     // Keep the runtime chunk seperated to enable long term caching
192 |     // https://twitter.com/wSokra/status/969679223278505985
193 |     runtimeChunk: true,
194 |   },
195 |   resolve: {
196 |     // This allows you to set a fallback for where Webpack should look for modules.
197 |     // We placed these paths second because we want `node_modules` to "win"
198 |     // if there are any conflicts. This matches Node resolution mechanism.
199 |     // https://github.com/facebook/create-react-app/issues/253
200 |     modules: ['node_modules'].concat(
201 |       // It is guaranteed to exist because we tweak it in `env.js`
202 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
203 |     ),
204 |     // These are the reasonable defaults supported by the Node ecosystem.
205 |     // We also include JSX as a common component filename extension to support
206 |     // some tools, although we do not recommend using it, see:
207 |     // https://github.com/facebook/create-react-app/issues/290
208 |     // `web` extension prefixes have been added for better support
209 |     // for React Native Web.
210 |     extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
211 |     alias: {
212 |       // Support React Native Web
213 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
214 |       'react-native': 'react-native-web',
215 |     },
216 |     plugins: [
217 |       // Adds support for installing with Plug'n'Play, leading to faster installs and adding
218 |       // guards against forgotten dependencies and such.
219 |       PnpWebpackPlugin,
220 |       // Prevents users from importing files from outside of src/ (or node_modules/).
221 |       // This often causes confusion because we only process files within src/ with babel.
222 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
223 |       // please link the files into your node_modules/ and let module-resolution kick in.
224 |       // Make sure your source files are compiled, as they will not be processed in any way.
225 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
226 |     ],
227 |   },
228 |   resolveLoader: {
229 |     plugins: [
230 |       // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
231 |       // from the current package.
232 |       PnpWebpackPlugin.moduleLoader(module),
233 |     ],
234 |   },
235 |   module: {
236 |     strictExportPresence: true,
237 |     rules: [
238 |       // Disable require.ensure as it's not a standard language feature.
239 |       { parser: { requireEnsure: false } },
240 | 
241 |       // First, run the linter.
242 |       // It's important to do this before Babel processes the JS.
243 |       {
244 |         test: /\.(js|mjs|jsx)$/,
245 |         enforce: 'pre',
246 |         use: [
247 |           {
248 |             options: {
249 |               formatter: require.resolve('react-dev-utils/eslintFormatter'),
250 |               eslintPath: require.resolve('eslint'),
251 |               
252 |             },
253 |             loader: require.resolve('eslint-loader'),
254 |           },
255 |         ],
256 |         include: paths.appSrc,
257 |       },
258 |       {
259 |         // "oneOf" will traverse all following loaders until one will
260 |         // match the requirements. When no loader matches it will fall
261 |         // back to the "file" loader at the end of the loader list.
262 |         oneOf: [
263 |           // "url" loader works just like "file" loader but it also embeds
264 |           // assets smaller than specified size as data URLs to avoid requests.
265 |           {
266 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
267 |             loader: require.resolve('url-loader'),
268 |             options: {
269 |               limit: 10000,
270 |               name: 'static/media/[name].[hash:8].[ext]',
271 |             },
272 |           },
273 |           // Process application JS with Babel.
274 |           // The preset includes JSX, Flow, and some ESnext features.
275 |           {
276 |             test: /\.(js|mjs|jsx)$/,
277 |             include: paths.appSrc,
278 | 
279 |             loader: require.resolve('babel-loader'),
280 |             options: {
281 |               customize: require.resolve(
282 |                 'babel-preset-react-app/webpack-overrides'
283 |               ),
284 |               
285 |               plugins: [
286 |                 [
287 |                   require.resolve('babel-plugin-named-asset-import'),
288 |                   {
289 |                     loaderMap: {
290 |                       svg: {
291 |                         ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
292 |                       },
293 |                     },
294 |                   },
295 |                 ],
296 |               ],
297 |               cacheDirectory: true,
298 |               // Save disk space when time isn't as important
299 |               cacheCompression: true,
300 |               compact: true,
301 |             },
302 |           },
303 |           // Process any JS outside of the app with Babel.
304 |           // Unlike the application JS, we only compile the standard ES features.
305 |           {
306 |             test: /\.(js|mjs)$/,
307 |             exclude: /@babel(?:\/|\\{1,2})runtime/,
308 |             loader: require.resolve('babel-loader'),
309 |             options: {
310 |               babelrc: false,
311 |               configFile: false,
312 |               compact: false,
313 |               presets: [
314 |                 [
315 |                   require.resolve('babel-preset-react-app/dependencies'),
316 |                   { helpers: true },
317 |                 ],
318 |               ],
319 |               cacheDirectory: true,
320 |               // Save disk space when time isn't as important
321 |               cacheCompression: true,
322 |               
323 |               // If an error happens in a package, it's possible to be
324 |               // because it was compiled. Thus, we don't want the browser
325 |               // debugger to show the original code. Instead, the code
326 |               // being evaluated would be much more helpful.
327 |               sourceMaps: false,
328 |             },
329 |           },
330 |           // "postcss" loader applies autoprefixer to our CSS.
331 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
332 |           // `MiniCSSExtractPlugin` extracts styles into CSS
333 |           // files. If you use code splitting, async bundles will have their own separate CSS chunk file.
334 |           // By default we support CSS Modules with the extension .module.css
335 |           {
336 |             test: cssRegex,
337 |             exclude: cssModuleRegex,
338 |             loader: getStyleLoaders({
339 |               importLoaders: 1,
340 |               sourceMap: shouldUseSourceMap,
341 |             }),
342 |             // Don't consider CSS imports dead code even if the
343 |             // containing package claims to have no side effects.
344 |             // Remove this when webpack adds a warning or an error for this.
345 |             // See https://github.com/webpack/webpack/issues/6571
346 |             sideEffects: true,
347 |           },
348 |           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
349 |           // using the extension .module.css
350 |           {
351 |             test: cssModuleRegex,
352 |             loader: getStyleLoaders({
353 |               importLoaders: 1,
354 |               sourceMap: shouldUseSourceMap,
355 |               modules: true,
356 |               getLocalIdent: getCSSModuleLocalIdent,
357 |             }),
358 |           },
359 |           // Opt-in support for SASS. The logic here is somewhat similar
360 |           // as in the CSS routine, except that "sass-loader" runs first
361 |           // to compile SASS files into CSS.
362 |           // By default we support SASS Modules with the
363 |           // extensions .module.scss or .module.sass
364 |           {
365 |             test: sassRegex,
366 |             exclude: sassModuleRegex,
367 |             loader: getStyleLoaders(
368 |               {
369 |                 importLoaders: 2,
370 |                 sourceMap: shouldUseSourceMap,
371 |               },
372 |               'sass-loader'
373 |             ),
374 |             // Don't consider CSS imports dead code even if the
375 |             // containing package claims to have no side effects.
376 |             // Remove this when webpack adds a warning or an error for this.
377 |             // See https://github.com/webpack/webpack/issues/6571
378 |             sideEffects: true,
379 |           },
380 |           // Adds support for CSS Modules, but using SASS
381 |           // using the extension .module.scss or .module.sass
382 |           {
383 |             test: sassModuleRegex,
384 |             loader: getStyleLoaders(
385 |               {
386 |                 importLoaders: 2,
387 |                 sourceMap: shouldUseSourceMap,
388 |                 modules: true,
389 |                 getLocalIdent: getCSSModuleLocalIdent,
390 |               },
391 |               'sass-loader'
392 |             ),
393 |           },
394 |           // "file" loader makes sure assets end up in the `build` folder.
395 |           // When you `import` an asset, you get its filename.
396 |           // This loader doesn't use a "test" so it will catch all modules
397 |           // that fall through the other loaders.
398 |           {
399 |             loader: require.resolve('file-loader'),
400 |             // Exclude `js` files to keep "css" loader working as it injects
401 |             // it's runtime that would otherwise be processed through "file" loader.
402 |             // Also exclude `html` and `json` extensions so they get processed
403 |             // by webpacks internal loaders.
404 |             exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/],
405 |             options: {
406 |               name: 'static/media/[name].[hash:8].[ext]',
407 |             },
408 |           },
409 |           // ** STOP ** Are you adding a new loader?
410 |           // Make sure to add the new loader(s) before the "file" loader.
411 |         ],
412 |       },
413 |     ],
414 |   },
415 |   plugins: [
416 |     // Generates an `index.html` file with the <script> injected.
417 |     new HtmlWebpackPlugin({
418 |       inject: true,
419 |       template: paths.appHtml,
420 |       minify: {
421 |         removeComments: true,
422 |         collapseWhitespace: true,
423 |         removeRedundantAttributes: true,
424 |         useShortDoctype: true,
425 |         removeEmptyAttributes: true,
426 |         removeStyleLinkTypeAttributes: true,
427 |         keepClosingSlash: true,
428 |         minifyJS: true,
429 |         minifyCSS: true,
430 |         minifyURLs: true,
431 |       },
432 |     }),
433 |     // Inlines the webpack runtime script. This script is too small to warrant
434 |     // a network request.
435 |     new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
436 |     // Makes some environment variables available in index.html.
437 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
438 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
439 |     // In production, it will be an empty string unless you specify "homepage"
440 |     // in `package.json`, in which case it will be the pathname of that URL.
441 |     new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
442 |     // This gives some necessary context to module not found errors, such as
443 |     // the requesting resource.
444 |     new ModuleNotFoundPlugin(paths.appPath),
445 |     // Makes some environment variables available to the JS code, for example:
446 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
447 |     // It is absolutely essential that NODE_ENV was set to production here.
448 |     // Otherwise React will be compiled in the very slow development mode.
449 |     new webpack.DefinePlugin(env.stringified),
450 |     new MiniCssExtractPlugin({
451 |       // Options similar to the same options in webpackOptions.output
452 |       // both options are optional
453 |       filename: 'static/css/[name].[contenthash:8].css',
454 |       chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
455 |     }),
456 |     // Generate a manifest file which contains a mapping of all asset filenames
457 |     // to their corresponding output file so that tools can pick it up without
458 |     // having to parse `index.html`.
459 |     new ManifestPlugin({
460 |       fileName: 'asset-manifest.json',
461 |       publicPath: publicPath,
462 |     }),
463 |     // Moment.js is an extremely popular library that bundles large locale files
464 |     // by default due to how Webpack interprets its code. This is a practical
465 |     // solution that requires the user to opt into importing specific locales.
466 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
467 |     // You can remove this if you don't use Moment.js:
468 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
469 |     // Generate a service worker script that will precache, and keep up to date,
470 |     // the HTML & assets that are part of the Webpack build.
471 |     new WorkboxWebpackPlugin.GenerateSW({
472 |       clientsClaim: true,
473 |       exclude: [/\.map$/, /asset-manifest\.json$/],
474 |       importWorkboxFrom: 'cdn',
475 |       navigateFallback: publicUrl + '/index.html',
476 |       navigateFallbackBlacklist: [
477 |         // Exclude URLs starting with /_, as they're likely an API call
478 |         new RegExp('^/_'),
479 |         // Exclude URLs containing a dot, as they're likely a resource in
480 |         // public/ and not a SPA route
481 |         new RegExp('/[^/]+\\.[^/]+$'),
482 |       ],
483 |     }),
484 |   ],
485 |   // Some libraries import Node modules but don't use them in the browser.
486 |   // Tell Webpack to provide empty mocks for them so importing them works.
487 |   node: {
488 |     dgram: 'empty',
489 |     fs: 'empty',
490 |     net: 'empty',
491 |     tls: 'empty',
492 |     child_process: 'empty',
493 |   },
494 |   // Turn off performance processing because we utilize
495 |   // our own hints via the FileSizeReporter
496 |   performance: false,
497 | };
498 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const config = require('./webpack.config.dev');
  8 | const paths = require('./paths');
  9 | const fs = require('fs');
 10 | 
 11 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 12 | const host = process.env.HOST || '0.0.0.0';
 13 | 
 14 | module.exports = function(proxy, allowedHost) {
 15 |   return {
 16 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 17 |     // websites from potentially accessing local content through DNS rebinding:
 18 |     // https://github.com/webpack/webpack-dev-server/issues/887
 19 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 20 |     // However, it made several existing use cases such as development in cloud
 21 |     // environment or subdomains in development significantly more complicated:
 22 |     // https://github.com/facebook/create-react-app/issues/2271
 23 |     // https://github.com/facebook/create-react-app/issues/2233
 24 |     // While we're investigating better solutions, for now we will take a
 25 |     // compromise. Since our WDS configuration only serves files in the `public`
 26 |     // folder we won't consider accessing them a vulnerability. However, if you
 27 |     // use the `proxy` feature, it gets more dangerous because it can expose
 28 |     // remote code execution vulnerabilities in backends like Django and Rails.
 29 |     // So we will disable the host check normally, but enable it if you have
 30 |     // specified the `proxy` setting. Finally, we let you override it if you
 31 |     // really know what you're doing with a special environment variable.
 32 |     disableHostCheck:
 33 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 34 |     // Enable gzip compression of generated files.
 35 |     compress: true,
 36 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 37 |     // It will still show compile warnings and errors with this setting.
 38 |     clientLogLevel: 'none',
 39 |     // By default WebpackDevServer serves physical files from current directory
 40 |     // in addition to all the virtual build products that it serves from memory.
 41 |     // This is confusing because those files won’t automatically be available in
 42 |     // production build folder unless we copy them. However, copying the whole
 43 |     // project directory is dangerous because we may expose sensitive files.
 44 |     // Instead, we establish a convention that only files in `public` directory
 45 |     // get served. Our build script will copy `public` into the `build` folder.
 46 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 47 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 48 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 49 |     // Note that we only recommend to use `public` folder as an escape hatch
 50 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 51 |     // for some reason broken when imported through Webpack. If you just want to
 52 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 53 |     contentBase: paths.appPublic,
 54 |     // By default files from `contentBase` will not trigger a page reload.
 55 |     watchContentBase: true,
 56 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 57 |     // for the WebpackDevServer client so it can learn when the files were
 58 |     // updated. The WebpackDevServer client is included as an entry point
 59 |     // in the Webpack development configuration. Note that only changes
 60 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 61 |     hot: true,
 62 |     // It is important to tell WebpackDevServer to use the same "root" path
 63 |     // as we specified in the config. In development, we always serve from /.
 64 |     publicPath: config.output.publicPath,
 65 |     // WebpackDevServer is noisy by default so we emit custom message instead
 66 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 67 |     quiet: true,
 68 |     // Reportedly, this avoids CPU overload on some systems.
 69 |     // https://github.com/facebook/create-react-app/issues/293
 70 |     // src/node_modules is not ignored to support absolute imports
 71 |     // https://github.com/facebook/create-react-app/issues/1065
 72 |     watchOptions: {
 73 |       ignored: ignoredFiles(paths.appSrc),
 74 |     },
 75 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 76 |     https: protocol === 'https',
 77 |     host,
 78 |     overlay: false,
 79 |     historyApiFallback: {
 80 |       // Paths with dots should still use the history fallback.
 81 |       // See https://github.com/facebook/create-react-app/issues/387.
 82 |       disableDotRule: true,
 83 |     },
 84 |     public: allowedHost,
 85 |     proxy,
 86 |     before(app, server) {
 87 |       if (fs.existsSync(paths.proxySetup)) {
 88 |         // This registers user provided middleware for proxy reasons
 89 |         require(paths.proxySetup)(app);
 90 |       }
 91 | 
 92 |       // This lets us fetch source contents from webpack for the error overlay
 93 |       app.use(evalSourceMapMiddleware(server));
 94 |       // This lets us open files from the runtime error overlay.
 95 |       app.use(errorOverlayMiddleware());
 96 | 
 97 |       // This service worker file is effectively a 'no-op' that will reset any
 98 |       // previous service worker registered for the same host:port combination.
 99 |       // We do this in development to avoid hitting the production cache if
100 |       // it used the same host and port.
101 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
102 |       app.use(noopServiceWorkerMiddleware());
103 |     },
104 |   };
105 | };
106 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "my-app",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@fortawesome/fontawesome-svg-core": "^1.2.12",
  7 |     "@fortawesome/react-fontawesome": "^0.1.4",
  8 |     "@material-ui/core": "^3.9.0",
  9 |     "@material-ui/icons": "^3.0.2",
 10 |     "@svgr/webpack": "2.4.1",
 11 |     "axios": "^0.18.0",
 12 |     "bfj": "6.1.1",
 13 |     "bootstrap": "^4.1.3",
 14 |     "case-sensitive-paths-webpack-plugin": "2.1.2",
 15 |     "chalk": "2.4.1",
 16 |     "connected-react-router": "^4.5.0",
 17 |     "css-loader": "1.0.0",
 18 |     "dotenv": "6.0.0",
 19 |     "dotenv-expand": "4.2.0",
 20 |     "eslint": "5.6.0",
 21 |     "eslint-config-react-app": "^3.0.3",
 22 |     "eslint-loader": "2.1.1",
 23 |     "eslint-plugin-flowtype": "2.50.1",
 24 |     "eslint-plugin-import": "2.14.0",
 25 |     "eslint-plugin-jsx-a11y": "6.1.1",
 26 |     "eslint-plugin-react": "7.11.1",
 27 |     "file-loader": "2.0.0",
 28 |     "fs-extra": "7.0.0",
 29 |     "history": "^4.7.2",
 30 |     "html-webpack-plugin": "4.0.0-alpha.2",
 31 |     "i": "^0.3.6",
 32 |     "identity-obj-proxy": "3.0.0",
 33 |     "jest": "23.6.0",
 34 |     "jest-pnp-resolver": "1.0.1",
 35 |     "jest-resolve": "23.6.0",
 36 |     "jwt-decode": "^2.2.0",
 37 |     "lru-memoize": "^1.0.2",
 38 |     "material-ui": "^0.20.2",
 39 |     "mini-css-extract-plugin": "0.4.3",
 40 |     "node-sass": "^4.9.3",
 41 |     "npm": "^6.4.1",
 42 |     "npm-run-all": "^4.1.5",
 43 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 44 |     "path": "^0.12.7",
 45 |     "pm2": "^3.2.2",
 46 |     "pnp-webpack-plugin": "1.1.0",
 47 |     "postcss-flexbugs-fixes": "4.1.0",
 48 |     "postcss-loader": "3.0.0",
 49 |     "postcss-preset-env": "6.0.6",
 50 |     "postcss-safe-parser": "4.0.1",
 51 |     "react": "^16.5.2",
 52 |     "react-app-polyfill": "^0.1.3",
 53 |     "react-beautiful-dnd": "^9.0.2",
 54 |     "react-bootstrap": "^0.32.4",
 55 |     "react-dev-utils": "^6.0.4",
 56 |     "react-dom": "^16.5.2",
 57 |     "react-redux": "^5.0.7",
 58 |     "react-responsive-modal": "^3.5.0",
 59 |     "react-router-dom": "^4.3.1",
 60 |     "react-scripts": "^2.1.3",
 61 |     "react-spinners": "^0.4.5",
 62 |     "redux": "^4.0.0",
 63 |     "redux-form": "^7.4.2",
 64 |     "redux-observable": "^1.0.0",
 65 |     "redux-thunk": "^2.3.0",
 66 |     "resolve": "1.8.1",
 67 |     "sass-loader": "7.1.0",
 68 |     "style-loader": "0.23.0",
 69 |     "terser-webpack-plugin": "1.1.0",
 70 |     "url-loader": "1.1.1",
 71 |     "webpack": "4.19.1",
 72 |     "webpack-dev-server": "^3.1.14",
 73 |     "webpack-manifest-plugin": "2.0.4",
 74 |     "workbox-webpack-plugin": "3.6.2"
 75 |   },
 76 |   "devDependencies": {
 77 |     "@babel/core": "7.1.0",
 78 |     "eslint-config-airbnb": "^17.1.0",
 79 |     "babel-core": "7.0.0-bridge.0",
 80 |     "babel-eslint": "9.0.0",
 81 |     "babel-jest": "23.6.0",
 82 |     "babel-loader": "8.0.4",
 83 |     "babel-plugin-named-asset-import": "^0.2.2",
 84 |     "babel-preset-react-app": "^5.0.3"
 85 |   },
 86 |   "scripts": {
 87 |     "start": "node scripts/start.js",
 88 |     "build": "node scripts/build.js",
 89 |     "test": "node scripts/test.js",
 90 |     "start:Prod": "npm run build && pm2 start pm2.json"
 91 |   },
 92 |   "eslintConfig": {
 93 |     "extends": "react-app"
 94 |   },
 95 |   "browserslist": [
 96 |     ">0.2%",
 97 |     "not dead",
 98 |     "not ie <= 11",
 99 |     "not op_mini all"
100 |   ],
101 |   "jest": {
102 |     "collectCoverageFrom": [
103 |       "src/**/*.{js,jsx}"
104 |     ],
105 |     "resolver": "jest-pnp-resolver",
106 |     "setupFiles": [
107 |       "react-app-polyfill/jsdom"
108 |     ],
109 |     "testMatch": [
110 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx}",
111 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
112 |     ],
113 |     "testEnvironment": "jsdom",
114 |     "testURL": "http://localhost",
115 |     "transform": {
116 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
117 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
118 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
119 |     },
120 |     "transformIgnorePatterns": [
121 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
122 |       "^.+\\.module\\.(css|sass|scss)$"
123 |     ],
124 |     "moduleNameMapper": {
125 |       "^react-native$": "react-native-web",
126 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
127 |     },
128 |     "moduleFileExtensions": [
129 |       "web.js",
130 |       "js",
131 |       "json",
132 |       "web.jsx",
133 |       "jsx",
134 |       "node"
135 |     ]
136 |   },
137 |   "babel": {
138 |     "presets": [
139 |       "react-app"
140 |     ]
141 |   }
142 | }
143 | 


--------------------------------------------------------------------------------
/pm2.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "apps": [{
 3 |     "name": "kyc-client",
 4 |     "script": "./server.js",
 5 |     "instances": 1,
 6 |     "exec_mode": "fork",
 7 |     "env": {
 8 |       "PORT": "3052",
 9 |       "COOKIE_NAME": "__sid",
10 |       "NODE_PATH": "src/",
11 |       "USER_STORAGE": "user",
12 |       "KYC_API": "http://139.162.72.164:3050"
13 |     }
14 |   }]
15 | }


--------------------------------------------------------------------------------
/public/assets/images/bg-main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhattruongniit/react-codebase/50090bb71256ea946845bd17d4754f8effab0ff8/public/assets/images/bg-main.png


--------------------------------------------------------------------------------
/public/assets/images/bg-sidebar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhattruongniit/react-codebase/50090bb71256ea946845bd17d4754f8effab0ff8/public/assets/images/bg-sidebar.jpg


--------------------------------------------------------------------------------
/public/assets/images/img-icon-success.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="101px" height="56px" viewBox="0 0 101 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Group 3</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs></defs>
 7 |     <g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 8 |         <g id="QNT-06_Sumany-Copy" transform="translate(-446.000000, -221.000000)">
 9 |             <g id="Group-3" transform="translate(446.000000, 221.000000)">
10 |                 <g id="Group-2-Copy">
11 |                     <rect id="Rectangle-7" fill="#D6E9F9" x="0" y="26" width="35" height="5" rx="2.5"></rect>
12 |                     <rect id="Rectangle-7-Copy-2" fill="#D6E9F9" x="58" y="39" width="35" height="5" rx="2.5"></rect>
13 |                     <rect id="Rectangle-7-Copy" fill="#D6E9F9" x="8" y="31" width="35" height="5" rx="2.5"></rect>
14 |                     <rect id="Rectangle-7-Copy-3" fill="#D6E9F9" x="66" y="44" width="35" height="5" rx="2.5"></rect>
15 |                     <g id="email" transform="translate(22.000000, 0.000000)" fill-rule="nonzero">
16 |                         <path d="M56.8888889,18.5568627 L29.7481111,0.519701961 C28.9184444,-0.0658823529 27.8517778,-0.0658823529 27.1406667,0.519701961 L0,18.5568627 L0,18.5568627 L28.4444444,40.4591216 L56.8888889,18.5568627 L56.8888889,18.5568627 Z" id="Shape" fill="#FF7058"></path>
17 |                         <path d="M53.3333333,40.4591216 L3.55555556,40.4591216 L3.55555556,7.07872941 C3.55555556,5.7904 4.62222222,4.73628235 5.92588889,4.73628235 L50.9628889,4.73628235 C52.2665556,4.73628235 53.3332222,5.7904 53.3332222,7.07872941 L53.3332222,40.4591216 L53.3333333,40.4591216 Z" id="Shape" fill="#F2F2F2"></path>
18 |                         <path d="M56.8888889,18.5568627 L28.4444444,40.4591216 L0,18.5568627 L0,18.5568627 L0,53.5769569 C0,54.279702 0.355555556,54.8652863 0.829666667,55.3338196 C1.18522222,55.6851922 1.77777778,55.9194039 2.37044444,55.9194039 L54.5185556,55.9194039 C55.1111111,55.9194039 55.7037778,55.6851922 56.0593333,55.3338196 C56.5334444,54.8652863 56.889,54.279702 56.889,53.5769569 L56.889,18.5568627 L56.8888889,18.5568627 Z" id="Shape" fill="#FFD15C"></path>
19 |                         <path d="M2.37033333,55.9195137 L54.5184444,55.9195137 C55.111,55.9195137 55.7036667,55.685302 56.0592222,55.3339294 L32.7111111,37.1796078 L24.1777778,37.1796078 L0.829666667,55.3338196 L2.37033333,55.9195137 Z" id="Shape" fill="#F8B64C"></path>
20 |                         <g id="Group" transform="translate(8.666667, 9.882353)" fill="#CDD6E0">
21 |                             <rect id="Rectangle-path" x="0.103666667" y="8.90872157" width="39.3481111" height="2.92814118"></rect>
22 |                             <rect id="Rectangle-path" x="9.22966667" y="17.8101961" width="21.0963333" height="2.92814118"></rect>
23 |                             <rect id="Rectangle-path" x="0.103666667" y="0.00735686275" width="39.3481111" height="2.92814118"></rect>
24 |                         </g>
25 |                     </g>
26 |                 </g>
27 |                 <g id="Group" transform="translate(41.000000, 10.000000)" fill-rule="nonzero">
28 |                     <circle id="Oval" stroke="#F2F2F2" stroke-width="2" fill="#26B999" cx="10" cy="10" r="10"></circle>
29 |                     <path d="M15.4758333,5.14916667 C15.0966667,4.88583333 14.5783333,4.97916667 14.3158333,5.3575 L9.6525,12.0575 L6.36166667,9.35583333 C6.00666667,9.06333333 5.48083333,9.11583333 5.18916667,9.47166667 C4.89666667,9.8275 4.94833333,10.3525 5.305,10.6441667 L9.29333333,13.9183333 C9.44333333,14.0408333 9.63,14.1075 9.82166667,14.1075 C9.85916667,14.1075 9.8975,14.105 9.93583333,14.1 C10.1658333,14.0675 10.3725,13.9416667 10.5058333,13.7508333 L15.6841667,6.31 C15.9466667,5.93166667 15.8533333,5.4125 15.4758333,5.14916667 Z" id="Shape" fill="#FFFFFF"></path>
30 |                 </g>
31 |             </g>
32 |         </g>
33 |     </g>
34 | </svg>


--------------------------------------------------------------------------------
/public/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhattruongniit/react-codebase/50090bb71256ea946845bd17d4754f8effab0ff8/public/assets/images/logo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhattruongniit/react-codebase/50090bb71256ea946845bd17d4754f8effab0ff8/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |     <meta name="theme-color" content="#000000">
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
14 |     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
15 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React App</title>
26 |   </head>
27 |   <body>
28 |     <noscript>
29 |       You need to enable JavaScript to run this app.
30 |     </noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/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 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const bfj = require('bfj');
 23 | const config = require('../config/webpack.config.prod');
 24 | const paths = require('../config/paths');
 25 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 26 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 27 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 28 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 29 | const printBuildError = require('react-dev-utils/printBuildError');
 30 | 
 31 | const measureFileSizesBeforeBuild =
 32 |   FileSizeReporter.measureFileSizesBeforeBuild;
 33 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | 
 36 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 37 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 38 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 39 | 
 40 | const isInteractive = process.stdout.isTTY;
 41 | 
 42 | // Warn and crash if required files are missing
 43 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 44 |   process.exit(1);
 45 | }
 46 | 
 47 | // Process CLI arguments
 48 | const argv = process.argv.slice(2);
 49 | const writeStatsJson = argv.indexOf('--stats') !== -1;
 50 | 
 51 | // We require that you explictly set browsers and do not fall back to
 52 | // browserslist defaults.
 53 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 54 | checkBrowsers(paths.appPath, isInteractive)
 55 |   .then(() => {
 56 |     // First, read the current file sizes in build directory.
 57 |     // This lets us display how much they changed later.
 58 |     return measureFileSizesBeforeBuild(paths.appBuild);
 59 |   })
 60 |   .then(previousFileSizes => {
 61 |     // Remove all content but keep the directory so that
 62 |     // if you're in it, you don't end up in Trash
 63 |     fs.emptyDirSync(paths.appBuild);
 64 |     // Merge with the public folder
 65 |     copyPublicFolder();
 66 |     // Start the webpack build
 67 |     return build(previousFileSizes);
 68 |   })
 69 |   .then(
 70 |     ({ stats, previousFileSizes, warnings }) => {
 71 |       if (warnings.length) {
 72 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 73 |         console.log(warnings.join('\n\n'));
 74 |         console.log(
 75 |           '\nSearch for the ' +
 76 |             chalk.underline(chalk.yellow('keywords')) +
 77 |             ' to learn more about each warning.'
 78 |         );
 79 |         console.log(
 80 |           'To ignore, add ' +
 81 |             chalk.cyan('// eslint-disable-next-line') +
 82 |             ' to the line before.\n'
 83 |         );
 84 |       } else {
 85 |         console.log(chalk.green('Compiled successfully.\n'));
 86 |       }
 87 | 
 88 |       console.log('File sizes after gzip:\n');
 89 |       printFileSizesAfterBuild(
 90 |         stats,
 91 |         previousFileSizes,
 92 |         paths.appBuild,
 93 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 94 |         WARN_AFTER_CHUNK_GZIP_SIZE
 95 |       );
 96 |       console.log();
 97 | 
 98 |       const appPackage = require(paths.appPackageJson);
 99 |       const publicUrl = paths.publicUrl;
100 |       const publicPath = config.output.publicPath;
101 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
102 |       printHostingInstructions(
103 |         appPackage,
104 |         publicUrl,
105 |         publicPath,
106 |         buildFolder,
107 |         useYarn
108 |       );
109 |     },
110 |     err => {
111 |       console.log(chalk.red('Failed to compile.\n'));
112 |       printBuildError(err);
113 |       process.exit(1);
114 |     }
115 |   )
116 |   .catch(err => {
117 |     if (err && err.message) {
118 |       console.log(err.message);
119 |     }
120 |     process.exit(1);
121 |   });
122 | 
123 | // Create the production build and print the deployment instructions.
124 | function build(previousFileSizes) {
125 |   console.log('Creating an optimized production build...');
126 | 
127 |   let compiler = webpack(config);
128 |   return new Promise((resolve, reject) => {
129 |     compiler.run((err, stats) => {
130 |       let messages;
131 |       if (err) {
132 |         if (!err.message) {
133 |           return reject(err);
134 |         }
135 |         messages = formatWebpackMessages({
136 |           errors: [err.message],
137 |           warnings: [],
138 |         });
139 |       } else {
140 |         messages = formatWebpackMessages(
141 |           stats.toJson({ all: false, warnings: true, errors: true })
142 |         );
143 |       }
144 |       if (messages.errors.length) {
145 |         // Only keep the first error. Others are often indicative
146 |         // of the same problem, but confuse the reader with noise.
147 |         if (messages.errors.length > 1) {
148 |           messages.errors.length = 1;
149 |         }
150 |         return reject(new Error(messages.errors.join('\n\n')));
151 |       }
152 |       if (
153 |         process.env.CI &&
154 |         (typeof process.env.CI !== 'string' ||
155 |           process.env.CI.toLowerCase() !== 'false') &&
156 |         messages.warnings.length
157 |       ) {
158 |         console.log(
159 |           chalk.yellow(
160 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
161 |               'Most CI servers set it automatically.\n'
162 |           )
163 |         );
164 |         return reject(new Error(messages.warnings.join('\n\n')));
165 |       }
166 | 
167 |       const resolveArgs = {
168 |         stats,
169 |         previousFileSizes,
170 |         warnings: messages.warnings,
171 |       };
172 |       if (writeStatsJson) {
173 |         return bfj
174 |           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
175 |           .then(() => resolve(resolveArgs))
176 |           .catch(error => reject(new Error(error)));
177 |       }
178 | 
179 |       return resolve(resolveArgs);
180 |     });
181 |   });
182 | }
183 | 
184 | function copyPublicFolder() {
185 |   fs.copySync(paths.appPublic, paths.appBuild, {
186 |     dereference: true,
187 |     filter: file => file !== paths.appHtml,
188 |   });
189 | }
190 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', (err) => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const config = require('../config/webpack.config.dev');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || process.env.PORT;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST),
 52 |       )}`,
 53 |     ),
 54 |   );
 55 |   console.log(
 56 |     'If this was unintentional, check that you haven\'t mistakenly set it in your shell.',
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`,
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explictly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | 
 68 | checkBrowsers(paths.appPath, isInteractive)
 69 |   .then(() => choosePort(HOST, DEFAULT_PORT),
 70 |   )
 71 |   .then((port) => {
 72 |     if (port == null) {
 73 |       // We have not found a port.
 74 |       return;
 75 |     }
 76 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 77 |     const appName = require(paths.appPackageJson).name;
 78 |     const urls = prepareUrls(protocol, HOST, port);
 79 |     // Create a webpack compiler that is configured with custom messages.
 80 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 81 |     // Load proxy config
 82 |     const proxySetting = require(paths.appPackageJson).proxy;
 83 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 84 |     // Serve webpack assets generated by the compiler over a web server.
 85 |     const serverConfig = createDevServerConfig(
 86 |       proxyConfig,
 87 |       urls.lanUrlForConfig,
 88 |     );
 89 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 90 |     // Launch WebpackDevServer.
 91 |     devServer.listen(port, HOST, (err) => {
 92 |       if (err) {
 93 |         return console.log(err);
 94 |       }
 95 |       if (isInteractive) {
 96 |         clearConsole();
 97 |       }
 98 |       console.log(chalk.cyan('Starting the development server...\n'));
 99 |       openBrowser(`${urls.localUrlForBrowser}ZeAPP`);
100 |     });
101 | 
102 |     ['SIGINT', 'SIGTERM'].forEach((sig) => {
103 |       process.on(sig, () => {
104 |         devServer.close();
105 |         process.exit();
106 |       });
107 |     });
108 |   })
109 |   .catch((err) => {
110 |     if (err && err.message) {
111 |       console.log(err.message);
112 |     }
113 |     process.exit(1);
114 |   });
115 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI, in coverage mode, or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--coverage') === -1 &&
45 |   argv.indexOf('--watchAll') === -1
46 | ) {
47 |   // https://github.com/facebook/create-react-app/issues/5210
48 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 | 
52 | 
53 | jest.run(argv);
54 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const path = require('path');
 3 | require('dotenv').config();
 4 | 
 5 | const { PORT } = process.env;
 6 | const app = express();
 7 | 
 8 | app.use(express.static(path.join(__dirname, 'build')));
 9 | 
10 | app.get('/*', (req, res) => {
11 |   res.sendFile(path.join(__dirname, 'build', 'index.html'));
12 | });
13 | 
14 | app.listen(PORT, () => {
15 |   console.info(`Server Listening At ${PORT}`);
16 | });
17 | 


--------------------------------------------------------------------------------
/src/component/FormInput/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import TextField from '@material-ui/core/TextField';
 3 | import { fieldPropTypes } from 'redux-form';
 4 | import './style.scss';
 5 | 
 6 | function handleEyePassword(id) {
 7 |   const field = document.getElementById(id);
 8 |   const fieldAttr = field.getAttribute('type');
 9 |   const icons = document.getElementsByClassName(id)[0];
10 |   if (fieldAttr === 'password') {
11 |     field.setAttribute('type', 'text');
12 |     icons.innerHTML = 'visibility_off';
13 |   } else {
14 |     field.setAttribute('type', 'password');
15 |     icons.innerHTML = 'visibility';
16 |   }
17 | }
18 | 
19 | const FormInput = ({
20 |   id, input, label, classLabel, eyesPassword, meta: { touched, error }, ...custom
21 | }) => {
22 |   const errorText = touched && error;
23 |   return (
24 |     <div>
25 |       <TextField
26 |         id={id}
27 |         error={Boolean(errorText)}
28 |         label={errorText || label}
29 |         placeholder={label}
30 |         className="form-control-ma"
31 |         {...input}
32 |         {...custom}
33 |       />
34 |       {eyesPassword && (
35 |         <button type="button" className="c-button__eyes" onClick={() => handleEyePassword(id)}>
36 |           <i className={`${id} material-icons`}>visibility</i>
37 |         </button>
38 |       )}
39 |     </div>
40 |   );
41 | };
42 | 
43 | FormInput.propTypes = fieldPropTypes;
44 | 
45 | export default (FormInput);
46 | 


--------------------------------------------------------------------------------
/src/component/FormInput/style.scss:
--------------------------------------------------------------------------------
 1 | .form-control-ma {
 2 |   margin-bottom: 20px !important;
 3 |   width: 100%;
 4 |   position: relative;
 5 | }
 6 | 
 7 | .eyesPassword {
 8 |   position: absolute;
 9 |   right: 0;
10 |   top: 17px;
11 |   cursor: pointer;
12 | 
13 |   svg {
14 |     font-size: 20px;
15 |   }
16 | }


--------------------------------------------------------------------------------
/src/component/Header/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | export default () => (
4 |   <header className="app-header">
5 |     <p><code>src/App.js</code></p>
6 |   </header>
7 | );
8 | 


--------------------------------------------------------------------------------
/src/component/Modal/ModalSuccessWrapper.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | // import Button from '@material-ui/core/Button';
 4 | 
 5 | const ModalSuccessWrapper = ({ open, children, message }) => (
 6 |   <div className={open ? 'c-modal c-modal--visible' : 'c-modal'}>
 7 |     <div className="c-modal__content">
 8 |       <div className="c-modal__title">
 9 |         <div className="c-modal__align--center">
10 |           <img src="/assets/images/img-icon-success.svg" title="Icon Letter" alt="Icon Letter" />
11 |           <div className="c-modal__lead c-modal__lead--success"> Success !</div>
12 |         </div>
13 |       </div>
14 |       <div className="c-modal__middle">{message}</div>
15 |       {children && (
16 |         <div className="c-modal__footer c-modal__footer--right">
17 |           {children}
18 |         </div>
19 |       )}
20 |     </div>
21 |   </div>
22 | );
23 | 
24 | ModalSuccessWrapper.propTypes = {
25 |   open: PropTypes.bool.isRequired,
26 |   children: PropTypes.any.isRequired,
27 |   message: PropTypes.string.isRequired,
28 | };
29 | 
30 | export default ModalSuccessWrapper;
31 | 


--------------------------------------------------------------------------------
/src/component/Modal/index.js:
--------------------------------------------------------------------------------
1 | import ModalSuccessWrapper from './ModalSuccessWrapper';
2 | 
3 | export {
4 |   ModalSuccessWrapper,
5 | };
6 | 


--------------------------------------------------------------------------------
/src/component/PoolKyc/index.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   {
 3 |     id: 1,
 4 |     inputType: 'TextField',
 5 |     name: 'email',
 6 |     label: 'Email',
 7 |     validate: ['required', 'email'],
 8 |   },
 9 |   {
10 |     id: 2,
11 |     inputType: 'TextField',
12 |     name: 'firstName',
13 |     label: 'First Name',
14 |     validate: ['required'],
15 |   },
16 |   {
17 |     id: 3,
18 |     inputType: 'TextField',
19 |     name: 'lastName',
20 |     label: 'Last Name',
21 |     validate: ['required'],
22 |   },
23 |   {
24 |     id: 4,
25 |     inputType: 'TextField',
26 |     name: 'password',
27 |     label: 'Password',
28 |     validate: ['required'],
29 |   },
30 |   {
31 |     id: 5,
32 |     inputType: 'TextField',
33 |     name: 'phone',
34 |     label: 'Phone Number',
35 |     validate: ['required'],
36 |   },
37 | ];
38 | 


--------------------------------------------------------------------------------
/src/component/Sidebar/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { NavLink } from 'react-router-dom';
 4 | 
 5 | /* === material ui core === */
 6 | import List from '@material-ui/core/List';
 7 | import ListItem from '@material-ui/core/ListItem';
 8 | import ListItemIcon from '@material-ui/core/ListItemIcon';
 9 | import ListItemText from '@material-ui/core/ListItemText';
10 | import Collapse from '@material-ui/core/Collapse';
11 | 
12 | /* === material ui icons === */
13 | import ExpandLess from '@material-ui/icons/ExpandLess';
14 | import ExpandMore from '@material-ui/icons/ExpandMore';
15 | import SettingsIcon from '@material-ui/icons/Settings';
16 | import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
17 | 
18 | const Sidebar = ({ logoText, openExpand, handleOpenExpand, handleLogout, routesApp }) => {
19 |   const sidebarRoutes = (
20 |     <List>
21 |       {routesApp.map(item => (
22 |         <NavLink to={item.to} key={item.to} className="c-sidebar__link" activeClassName="active">
23 |           <ListItem button className="c-sidebar__button">
24 |             <ListItemIcon className="c-sidebar__icon">
25 |               <item.icon />
26 |             </ListItemIcon>
27 |             <ListItemText className="c-sidebar__text" primary={item.text} disableTypography />
28 |           </ListItem>
29 |         </NavLink>
30 |       ))}
31 |     </List>
32 |   );
33 | 
34 |   return (
35 |     <div className="c-sidebar">
36 |       <div className="c-sidebar__top">
37 |         <div className="c-sidebar__logoLink">
38 |           {logoText}
39 |         </div>
40 |       </div>
41 |       <div className="c-sidebar__nav">
42 |         {sidebarRoutes}
43 |         <div className="c-sidebar__expand">
44 |           <ListItem button onClick={handleOpenExpand} className="c-sidebar__button">
45 |             <ListItemIcon className="c-sidebar__icon">
46 |               <SettingsIcon />
47 |             </ListItemIcon>
48 |             <ListItemText inset primary="Settings" disableTypography className="c-sidebar__text" />
49 |             {openExpand ? <ExpandLess /> : <ExpandMore />}
50 |           </ListItem>
51 |           <Collapse in={openExpand} timeout="auto" unmountOnExit className="c-sidebar__expand--right">
52 |             <List component="div" disablePadding onClick={handleLogout} className="c-sidebar__link">
53 |               <ListItem button>
54 |                 <ListItemIcon className="c-sidebar__icon">
55 |                   <PowerSettingsNewIcon />
56 |                 </ListItemIcon>
57 |                 <ListItemText inset primary="Logout" disableTypography className="c-sidebar__text" />
58 |               </ListItem>
59 |             </List>
60 |           </Collapse>
61 |         </div>
62 |       </div>
63 |       <div className="c-sidebar__bg" />
64 |     </div>
65 |   );
66 | };
67 | 
68 | Sidebar.propTypes = {
69 |   handleLogout: PropTypes.func.isRequired,
70 |   handleOpenExpand: PropTypes.func.isRequired,
71 |   logoText: PropTypes.string.isRequired,
72 |   openExpand: PropTypes.bool.isRequired,
73 |   routesApp: PropTypes.any.isRequired,
74 | };
75 | 
76 | export default Sidebar;
77 | 


--------------------------------------------------------------------------------
/src/component/index.js:
--------------------------------------------------------------------------------
 1 | import Sidebar from './Sidebar';
 2 | import FormInput from './FormInput';
 3 | import { ModalSuccessWrapper } from './Modal';
 4 | 
 5 | export {
 6 |   FormInput,
 7 |   Sidebar,
 8 |   ModalSuccessWrapper,
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/feature/App/Container.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { bindActionCreators } from 'redux';
  3 | import PropTypes from 'prop-types';
  4 | import { connect } from 'react-redux';
  5 | import { withRouter, Switch, Route } from 'react-router-dom';
  6 | import { Loading, loadingAction } from 'feature';
  7 | import { storeAuthLogin } from 'feature/Login';
  8 | import Helper from 'lib/helper';
  9 | import { Sidebar } from 'component';
 10 | import { RoutesApp } from './Routes';
 11 | 
 12 | const switchRoutes = (
 13 |   <Switch>
 14 |     {RoutesApp.map(item => (
 15 |       <Route exact path={item.path} component={item.component} key={item.path} />
 16 |     ))}
 17 |   </Switch>
 18 | );
 19 | 
 20 | class App extends Component {
 21 |   static propTypes = {
 22 |     history: PropTypes.any.isRequired,
 23 |     match: PropTypes.object.isRequired,
 24 |     location: PropTypes.object.isRequired,
 25 |   };
 26 | 
 27 |   constructor(props) {
 28 |     super(props);
 29 |     const {
 30 |       match: {
 31 |         params: { nameApp },
 32 |       },
 33 |     } = this.props;
 34 |     this.state = {
 35 |       openExpand: false,
 36 |       hookNameApp: nameApp,
 37 |     };
 38 |   }
 39 | 
 40 |   componentWillMount = async () => {
 41 |     // const { hookNameApp } = this.state;
 42 |     // const { history, loadingAction } = this.props;
 43 |     // Helper.setStorage('nameApp', hookNameApp);
 44 |     // const cookie = Helper.getCookie();
 45 |     // if (cookie) {
 46 |     //   try {
 47 |     //     const { data } = await loadingAction(() => getInfo());
 48 |     //     Helper.setStorage('user', JSON.stringify(data));
 49 |     //     history.push(`/${hookNameApp}/profile`);
 50 |     //   } catch (error) {
 51 |     //     this.clearStorage();
 52 |     //     history.push('login');
 53 |     //   }
 54 |     // } else {
 55 |     //   history.push(`/${hookNameApp}/login`);
 56 |     // }
 57 |   };
 58 | 
 59 |   clearStorage = () => {
 60 |     Helper.removeStorage('user');
 61 |     Helper.removeCookie();
 62 |   };
 63 | 
 64 |   handleOpenExpand = () => {
 65 |     const { openExpand } = this.state;
 66 |     this.setState({ openExpand: !openExpand });
 67 |   };
 68 | 
 69 |   handleLogout = () => {
 70 |     const { history } = this.props;
 71 |     this.clearStorage();
 72 |     history.push('login');
 73 |   };
 74 | 
 75 |   titlePage = () => {
 76 |     let name;
 77 |     const { hookNameApp } = this.state;
 78 |     const {
 79 |       location: { pathname },
 80 |     } = this.props;
 81 |     RoutesApp.map(item => {
 82 |       if (`/${hookNameApp}/${item.to}` === pathname) name = item.text;
 83 |       return null;
 84 |     });
 85 |     return name;
 86 |   };
 87 | 
 88 |   render() {
 89 |     const { openExpand, hookNameApp } = this.state;
 90 |     return (
 91 |       <div className="app-container">
 92 |         <Sidebar
 93 |           routesApp={RoutesApp}
 94 |           logoText={hookNameApp}
 95 |           openExpand={openExpand}
 96 |           handleLogout={this.handleLogout}
 97 |           handleOpenExpand={this.handleOpenExpand}
 98 |         />
 99 |         <div className="c-panel">
100 |           <div className="c-panel__content">
101 |             <div className="c-card">
102 |               <div className="c-card__header">
103 |                 <h4 className="c-heading c-heading__h4">{this.titlePage()}</h4>
104 |               </div>
105 |               <div className="c-card__body">
106 |                 <div className="container-fluid">{switchRoutes}</div>
107 |               </div>
108 |             </div>
109 |           </div>
110 |         </div>
111 |         <Loading />
112 |       </div>
113 |     );
114 |   }
115 | }
116 | 
117 | const mapStateToProps = ({ auth }) => {
118 |   const { user = {} } = auth;
119 |   return {
120 |     user,
121 |   };
122 | };
123 | 
124 | const mapDispatchToProps = dispatch =>
125 |   bindActionCreators(
126 |     {
127 |       loadingAction,
128 |       storeAuthLogin,
129 |     },
130 |     dispatch,
131 |   );
132 | 
133 | export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
134 | 


--------------------------------------------------------------------------------
/src/feature/App/Routes.js:
--------------------------------------------------------------------------------
 1 | /* === import material icon === */
 2 | import PersonIcon from '@material-ui/icons/Person';
 3 | import VpnKeyIcon from '@material-ui/icons/VpnKey';
 4 | 
 5 | /* === import component === */
 6 | import ChangePassword from '../ChangePassword';
 7 | import Profile from '../Profile';
 8 | import ResetPassword from '../ResetPassword';
 9 | 
10 | export const RoutesApp = [
11 |   {
12 |     path: '/profile',
13 |     to: 'profile',
14 |     component: Profile,
15 |     icon: PersonIcon,
16 |     text: 'Profile',
17 |   },
18 |   {
19 |     path: '/change-password',
20 |     to: 'change-password',
21 |     component: ChangePassword,
22 |     icon: VpnKeyIcon,
23 |     text: 'Change Password',
24 |   },
25 |   {
26 |     path: '/reset-password',
27 |     to: 'reset-password',
28 |     component: ResetPassword,
29 |     icon: VpnKeyIcon,
30 |     text: 'Reset Password',
31 |   },
32 | ];
33 | 


--------------------------------------------------------------------------------
/src/feature/App/api.js:
--------------------------------------------------------------------------------
1 | import { kycHttp, urlApi } from 'service';
2 | 
3 | export const getInfo = async () => {
4 |   const { data } = await kycHttp.get({ path: `${urlApi.customer.getInfo}` });
5 |   return data;
6 | };
7 | 


--------------------------------------------------------------------------------
/src/feature/App/index.js:
--------------------------------------------------------------------------------
1 | import App from './Container';
2 | 
3 | export default App;
4 | 


--------------------------------------------------------------------------------
/src/feature/ChangePassword/Container.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { bindActionCreators } from 'redux';
 4 | import { withRouter } from 'react-router-dom';
 5 | import { connect } from 'react-redux';
 6 | 
 7 | import Helper from 'lib/helper';
 8 | import { loadingAction } from 'feature/Loading';
 9 | import { changePassword } from './api';
10 | import { ModalSuccess } from './component/Modal';
11 | import ChangePasswordForm from './component/Form';
12 | 
13 | class ChangePassword extends Component {
14 |   static propTypes = {
15 |     history: PropTypes.object.isRequired,
16 |   }
17 | 
18 |   constructor(props) {
19 |     super(props);
20 |     this.state = {
21 |       messageError: '',
22 |       open: false,
23 |     };
24 |   }
25 | 
26 |   handleSubmit = async (payload) => {
27 |     try {
28 |       const { loadingAction } = this.props;
29 |       await loadingAction(() => changePassword(payload));
30 |       this.setState({ open: true });
31 |     } catch (error) {
32 |       this.setState({ messageError: error.message });
33 |     }
34 |   }
35 | 
36 |   onCloseModal = () => {
37 |     const { history } = this.props;
38 |     Helper.removeCookie();
39 |     history.push('login');
40 |   }
41 | 
42 |   render() {
43 |     const { messageError, open } = this.state;
44 |     return (
45 |       <div className="o-container o-container--middle">
46 |         <div className="c-text c-text--error">{messageError}</div>
47 |         <ChangePasswordForm
48 |           onSubmit={this.handleSubmit}
49 |         />
50 |         <ModalSuccess open={open} onCloseModal={this.onCloseModal} />
51 |       </div>
52 |     );
53 |   }
54 | }
55 | const mapDispatchToProps = dispatch => (
56 |   bindActionCreators({
57 |     loadingAction,
58 |   }, dispatch)
59 | );
60 | 
61 | export default withRouter(connect(null, mapDispatchToProps)(ChangePassword));
62 | 


--------------------------------------------------------------------------------
/src/feature/ChangePassword/api.js:
--------------------------------------------------------------------------------
1 | import { kycHttp, urlApi } from 'service';
2 | 
3 | export const changePassword = async (payload) => {
4 |   const { data } = await kycHttp.post({ path: `${urlApi.customer.changePassword}`, payload });
5 |   return data;
6 | };
7 | 


--------------------------------------------------------------------------------
/src/feature/ChangePassword/component/Form/index.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable react/button-has-type */
 2 | /* eslint-disable no-unused-vars */
 3 | import React, { Component } from 'react';
 4 | import { reduxForm, Field, propTypes } from 'redux-form';
 5 | import { FormInput } from 'component';
 6 | import Button from '@material-ui/core/Button';
 7 | 
 8 | import validate from './validation';
 9 | 
10 | class ChangePasswordForm extends Component {
11 |     static propTypes = {
12 |       ...propTypes,
13 |     };
14 | 
15 |     render() {
16 |       const {
17 |         handleSubmit,
18 |       } = this.props;
19 | 
20 |       return (
21 |         <div>
22 |           <form onSubmit={handleSubmit}>
23 |             <div className="c-form__row">
24 |               <Field
25 |                 id="old_password"
26 |                 name="passwordOld"
27 |                 type="password"
28 |                 component={FormInput}
29 |                 label="Old Password"
30 |                 eyesPassword
31 |               />
32 |             </div>
33 |             <div className="c-form__row">
34 |               <Field
35 |                 id="new_password"
36 |                 name="password"
37 |                 type="password"
38 |                 component={FormInput}
39 |                 label="New Password"
40 |                 eyesPassword
41 |               />
42 |             </div>
43 |             <div className="c-form__row">
44 |               <Field
45 |                 id="confirm_password"
46 |                 name="passwordConfirmation"
47 |                 type="password"
48 |                 component={FormInput}
49 |                 label="Confirm Password"
50 |                 eyesPassword
51 |               />
52 |             </div>
53 |             <div className="c-button">
54 |               <Button type="submit" variant="contained" color="primary">
55 |                 Submit
56 |               </Button>
57 |             </div>
58 |           </form>
59 |         </div>
60 |       );
61 |     }
62 | }
63 | 
64 | export default reduxForm({
65 |   form: 'changepassword',
66 |   validate,
67 | })(ChangePasswordForm);
68 | 


--------------------------------------------------------------------------------
/src/feature/ChangePassword/component/Form/validation.js:
--------------------------------------------------------------------------------
 1 | import memoize from 'lru-memoize';
 2 | import {
 3 |   createValidator,
 4 |   required,
 5 |   match,
 6 |   noMatch,
 7 | } from 'lib/validation';
 8 | 
 9 | const loginValidation = createValidator({
10 |   passwordOld: [required],
11 |   password: [required, noMatch('passwordOld', "New password doesn't same as Old password")],
12 |   passwordConfirmation: [required, match('password', "Confirm password doesn't match New password")],
13 | });
14 | 
15 | export default memoize(10)(loginValidation);
16 | 


--------------------------------------------------------------------------------
/src/feature/ChangePassword/component/Modal/ModalSuccess.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | import { ModalSuccessWrapper } from 'component';
 5 | 
 6 | import Button from '@material-ui/core/Button';
 7 | 
 8 | const ModalSuccess = ({ open, onCloseModal }) => (
 9 |   <ModalSuccessWrapper open={open} message="You changed password successfully! Please login again.">
10 |     <Button variant="contained" color="secondary" onClick={onCloseModal}> Close </Button>
11 |   </ModalSuccessWrapper>
12 | );
13 | 
14 | ModalSuccess.propTypes = {
15 |   open: PropTypes.bool.isRequired,
16 |   onCloseModal: PropTypes.func.isRequired,
17 | };
18 | 
19 | export default ModalSuccess;
20 | 


--------------------------------------------------------------------------------
/src/feature/ChangePassword/component/Modal/index.js:
--------------------------------------------------------------------------------
1 | import ModalSuccess from './ModalSuccess';
2 | 
3 | export {
4 |   ModalSuccess,
5 | };
6 | 


--------------------------------------------------------------------------------
/src/feature/ChangePassword/index.js:
--------------------------------------------------------------------------------
1 | import ChangePassword from './Container';
2 | 
3 | export default ChangePassword;
4 | 


--------------------------------------------------------------------------------
/src/feature/ForgotPassword/Container.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { bindActionCreators } from 'redux';
 4 | import { withRouter, Link } from 'react-router-dom';
 5 | import { connect } from 'react-redux';
 6 | import { Loading, loadingAction } from 'feature';
 7 | import Helper from 'lib/helper';
 8 | import { forgotPassword } from './api';
 9 | import ForgotForm from './component/ForgotForm';
10 | import { ModalSuccess } from './component/Modal';
11 | 
12 | class Login extends Component {
13 |   static propTypes = {
14 |     history: PropTypes.any.isRequired,
15 |     match: PropTypes.object.isRequired,
16 |   }
17 | 
18 |   constructor(props) {
19 |     super(props);
20 |     this.state = {
21 |       mgsError: '',
22 |       open: false,
23 |     };
24 |     const { match: { params: { nameApp } } } = this.props;
25 |     this.hookNameApp = nameApp;
26 |   }
27 | 
28 |   componentWillMount() {
29 |     const { history } = this.props;
30 |     Helper.setStorage('nameApp', this.hookNameApp);
31 |     const cookie = Helper.getCookie();
32 |     if (cookie) history.push('profile');
33 |   }
34 | 
35 |   handleCloseModal = () => {
36 |     this.setState({ open: false });
37 |   }
38 | 
39 |   handleResend = () => {
40 |     console.log('send email again.');
41 |   }
42 | 
43 |   handleSubmit = async (payload) => {
44 |     // this.setState({ open: true });
45 |     try {
46 |       const { loadingAction } = this.props;
47 |       await loadingAction(() => forgotPassword(this.hookNameApp, payload));
48 |     } catch (error) {
49 |       this.setState({ mgsError: error.message });
50 |     }
51 |   }
52 | 
53 |   handleBackLogin = () => {
54 |     const { history } = this.props;
55 |     history.push('login');
56 |   }
57 | 
58 |   render() {
59 |     const { mgsError, open } = this.state;
60 |     return (
61 |       <div>
62 |         <div className="c-activities">
63 |           <div className="c-activities__container">
64 |             <h2 className="c-activities__heading">FORGOT PASSWORD</h2>
65 |             <div className="c-text c-text--error">{mgsError}</div>
66 |             <ForgotForm
67 |               onSubmit={this.handleSubmit}
68 |             />
69 |             <div className="c-activities__options c-activities__options--center">
70 |               <Link to="login">Login?</Link>
71 |             </div>
72 |           </div>
73 |         </div>
74 |         <Loading />
75 |         <ModalSuccess
76 |           open={open}
77 |           handleBackLogin={this.handleBackLogin}
78 |           handleResend={this.handleResend}
79 |         />
80 |       </div>
81 |     );
82 |   }
83 | }
84 | const mapDispatchToProps = dispatch => (
85 |   bindActionCreators({
86 |     loadingAction,
87 |   }, dispatch)
88 | );
89 | 
90 | export default withRouter(connect(null, mapDispatchToProps)(Login));
91 | 


--------------------------------------------------------------------------------
/src/feature/ForgotPassword/api.js:
--------------------------------------------------------------------------------
1 | import { kycHttp, urlApi } from 'service';
2 | 
3 | export const forgotPassword = async (domainApp, payload) => {
4 |   const { data } = await kycHttp.post({ path: `kyc/${domainApp}/${urlApi.customer.forgotPassword}`, payload });
5 |   return data;
6 | };
7 | 


--------------------------------------------------------------------------------
/src/feature/ForgotPassword/component/ForgotForm/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { reduxForm, Field, propTypes } from 'redux-form';
 3 | import { FormInput } from 'component';
 4 | import Button from '@material-ui/core/Button';
 5 | import validate from './validation';
 6 | 
 7 | class ForgotForm extends Component {
 8 |     static propTypes = {
 9 |       ...propTypes,
10 |     };
11 | 
12 |     render() {
13 |       const {
14 |         handleSubmit,
15 |       } = this.props;
16 | 
17 |       return (
18 |         <div>
19 |           <form className="c-activities__form" onSubmit={handleSubmit}>
20 |             <div className="c-form__row">
21 |               <Field
22 |                 name="email"
23 |                 type="text"
24 |                 component={FormInput}
25 |                 label="Email"
26 |               />
27 |             </div>
28 |             <div className="c-activities__button text-center">
29 |               <Button type="submit" variant="outlined" color="primary">
30 |                 SUBMIT
31 |               </Button>
32 |             </div>
33 |           </form>
34 |         </div>
35 |       );
36 |     }
37 | }
38 | 
39 | export default reduxForm({
40 |   form: 'forgot-password',
41 |   validate,
42 | })(ForgotForm);
43 | 


--------------------------------------------------------------------------------
/src/feature/ForgotPassword/component/ForgotForm/validation.js:
--------------------------------------------------------------------------------
 1 | import memoize from 'lru-memoize';
 2 | import {
 3 |   createValidator,
 4 |   required,
 5 |   email,
 6 | } from 'lib/validation';
 7 | 
 8 | const forgotValidation = createValidator({
 9 |   email: [required, email],
10 | });
11 | export default memoize(10)(forgotValidation);
12 | 


--------------------------------------------------------------------------------
/src/feature/ForgotPassword/component/Modal/ModalSuccess.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | import { ModalSuccessWrapper } from 'component';
 5 | import Button from '@material-ui/core/Button';
 6 | 
 7 | const ModalSuccess = ({ open, handleBackLogin }) => (
 8 |   <ModalSuccessWrapper open={open} message="Please check your email and follow the instructions to reset your password.">
 9 |     <Button className="c-button" variant="contained" color="primary" onClick={handleBackLogin}> Back to Login </Button>
10 |   </ModalSuccessWrapper>
11 | );
12 | 
13 | ModalSuccess.propTypes = {
14 |   open: PropTypes.bool.isRequired,
15 |   handleBackLogin: PropTypes.func.isRequired,
16 | };
17 | 
18 | export default ModalSuccess;
19 | 


--------------------------------------------------------------------------------
/src/feature/ForgotPassword/component/Modal/index.js:
--------------------------------------------------------------------------------
1 | import ModalSuccess from './ModalSuccess';
2 | 
3 | export {
4 |   ModalSuccess,
5 | };
6 | 


--------------------------------------------------------------------------------
/src/feature/ForgotPassword/index.js:
--------------------------------------------------------------------------------
1 | import ForgotPassword from './Container';
2 | 
3 | export default ForgotPassword;
4 | 


--------------------------------------------------------------------------------
/src/feature/Kyc/Container.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { bindActionCreators } from 'redux';
  3 | import { connect } from 'react-redux';
  4 | import PropTypes from 'prop-types';
  5 | import { loadingAction } from 'feature';
  6 | import { Grid, Row } from 'react-bootstrap';
  7 | import { withStyles } from '@material-ui/core/styles';
  8 | import Stepper from '@material-ui/core/Stepper';
  9 | import Step from '@material-ui/core/Step';
 10 | import StepLabel from '@material-ui/core/StepLabel';
 11 | import * as CreateKycActions from './redux/action';
 12 | import { getKycConfig, postKyc } from './api';
 13 | import KycFormRender from './component/KycFormRender';
 14 | import './style.scss';
 15 | 
 16 | const styles = theme => ({
 17 |   root: {
 18 |     width: '90%',
 19 |   },
 20 |   backButton: {
 21 |     marginRight: theme.spacing.unit,
 22 |   },
 23 |   instructions: {
 24 |     marginTop: theme.spacing.unit,
 25 |     marginBottom: theme.spacing.unit,
 26 |   },
 27 | });
 28 | 
 29 | const byId = id => item => item.id === id;
 30 | 
 31 | class CreateKyc extends Component {
 32 |   async componentDidMount() {
 33 |     const { loadingAction, storeSetKyc, match: { params: { kycId } } } = this.props;
 34 |     const forms = await loadingAction(() => getKycConfig({ kycId }));
 35 |     storeSetKyc(forms);
 36 |   }
 37 | 
 38 |   handleSubmitKyc = async (form) => {
 39 |     try {
 40 |       const { loading, activeStep, match: { params: { kycId } } } = this.props;
 41 |       await loading(() => postKyc({
 42 |         payload: {
 43 |           form,
 44 |         },
 45 |         formId: activeStep,
 46 |         customerId: '5bd833edc092c1034ce6c81a',
 47 |         kycId }));
 48 |     } catch (error) {
 49 |       console.log(error);
 50 |     }
 51 |   }
 52 | 
 53 |   getCurrentKyc = () => {
 54 |     const {
 55 |       activeStep, forms,
 56 |     } = this.props;
 57 | 
 58 |     return forms.find(byId(activeStep));
 59 |   }
 60 | 
 61 |   render() {
 62 |     const {
 63 |       activeStep, forms, classes,
 64 |     } = this.props;
 65 | 
 66 |     const currentKycForm = this.getCurrentKyc() || { schema: [] };
 67 | 
 68 |     return (
 69 |       <div className="create-kyc-container">
 70 |         <Grid fluid>
 71 |           <Row className="show-grid create-kyc-header">
 72 |             <div className={classes.root}>
 73 |               <Stepper activeStep={activeStep} alternativeLabel>
 74 |                 {forms.map(({ id, label }) => (
 75 |                   <Step key={id}>
 76 |                     <StepLabel>{label}</StepLabel>
 77 |                   </Step>
 78 |                 ))}
 79 |               </Stepper>
 80 |               <KycFormRender onSubmit={this.handleSubmitKyc} config={currentKycForm.schema} />
 81 |             </div>
 82 |           </Row>
 83 |         </Grid>
 84 |       </div>
 85 |     );
 86 |   }
 87 | }
 88 | 
 89 | CreateKyc.propTypes = {
 90 |   storeSetKyc: PropTypes.func.isRequired,
 91 |   activeStep: PropTypes.number.isRequired,
 92 |   classes: PropTypes.object.isRequired,
 93 |   forms: PropTypes.array.isRequired,
 94 | };
 95 | 
 96 | const mapStateToProps = ({ kyc: { forms, activeStep } }) => ({
 97 |   forms,
 98 |   activeStep,
 99 | });
100 | 
101 | const mapDispatchToProps = dispatch => (
102 |   bindActionCreators({
103 |     loadingAction,
104 |     ...CreateKycActions,
105 |   }, dispatch)
106 | );
107 | 
108 | export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(CreateKyc));
109 | 


--------------------------------------------------------------------------------
/src/feature/Kyc/api.js:
--------------------------------------------------------------------------------
 1 | import { kycHttp } from 'service';
 2 | 
 3 | export const getKycConfig = async ({ kycId }) => {
 4 |   const { data } = await kycHttp.get({ path: `api/kyc/${kycId}` });
 5 |   return data;
 6 | };
 7 | 
 8 | export const postKyc = async ({ kycId, formId, customerId, payload }) => {
 9 |   const { data } = await kycHttp.post({ path: `api/kyc/${kycId}/form/${formId}/customer/${customerId}`, payload });
10 |   return data;
11 | };
12 | 


--------------------------------------------------------------------------------
/src/feature/Kyc/component/KycFormRender/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { reduxForm, Field, propTypes } from 'redux-form';
 3 | import PropTypes from 'prop-types';
 4 | import { FormInput } from 'component';
 5 | import Button from '@material-ui/core/Button';
 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 7 | import { required, email, min, max } from 'lib/validation';
 8 | 
 9 | const FORM_FACTORY = {
10 |   TextField: FormInput,
11 | };
12 | 
13 | const VALIDATE_FACTORY = {
14 |   required,
15 |   email,
16 |   min,
17 |   max,
18 | };
19 | 
20 | const generateValidate = validate =>
21 |   validate.map(({ func, arg }) => {
22 |     if (!VALIDATE_FACTORY[func]) {
23 |       throw Error(`Miss ${func}`);
24 |     }
25 |     if (arg) {
26 |       return VALIDATE_FACTORY[func](arg);
27 |     }
28 |     return VALIDATE_FACTORY[func];
29 |   });
30 | 
31 | const KycFormRender = ({ config, handleSubmit }) => (
32 |   <div className="login-form">
33 |     <form className="form-inline clearfix" onSubmit={handleSubmit}>
34 |       {config &&
35 |         config.map(input => {
36 |           const { inputType, id, validate, typeOf, ...props } = input;
37 | 
38 |           return <Field key={id} {...props} validate={generateValidate(validate)} component={FORM_FACTORY[inputType]} />;
39 |         })}
40 |       <div className="form-control-ma">
41 |         <Button type="submit" variant="outlined" color="primary">
42 |           <FontAwesomeIcon icon="bolt" />
43 |           SUBMIT
44 |         </Button>
45 |       </div>
46 |       <div className="form-control-ma">
47 |         <Button variant="outlined" color="primary">
48 |           <FontAwesomeIcon icon="angle-double-right" />
49 |           NEXT LEVEL
50 |         </Button>
51 |       </div>
52 |     </form>
53 |   </div>
54 | );
55 | 
56 | KycFormRender.propTypes = {
57 |   config: PropTypes.array.isRequired,
58 |   ...propTypes,
59 | };
60 | 
61 | export default reduxForm({
62 |   form: 'login',
63 | })(KycFormRender);
64 | 


--------------------------------------------------------------------------------
/src/feature/Kyc/index.js:
--------------------------------------------------------------------------------
1 | import CreateKyc from './Container';
2 | import kycReducer from './redux/reducer';
3 | 
4 | export default CreateKyc;
5 | 
6 | export {
7 |   kycReducer,
8 | };
9 | 


--------------------------------------------------------------------------------
/src/feature/Kyc/redux/action.js:
--------------------------------------------------------------------------------
1 | import {
2 |   KYC_FORM_LOADED,
3 | } from './reducer';
4 | 
5 | export const storeSetKyc = payload => ({ type: KYC_FORM_LOADED, payload });
6 | 


--------------------------------------------------------------------------------
/src/feature/Kyc/redux/reducer.js:
--------------------------------------------------------------------------------
 1 | export const KYC_FORM_LOADED = 'KYC/FORM/LOADED';
 2 | export const KYC_FORM_RESET = 'KYC/FORM/RESET';
 3 | 
 4 | const initialState = {
 5 |   forms: [],
 6 |   activeStep: 1,
 7 | };
 8 | 
 9 | const reducer = (state = initialState, { type, payload }) => {
10 |   switch (type) {
11 |     case KYC_FORM_LOADED:
12 |       return {
13 |         ...state,
14 |         forms: payload,
15 |       };
16 |     case KYC_FORM_RESET:
17 |       return initialState;
18 |     default:
19 |       return state;
20 |   }
21 | };
22 | 
23 | export default reducer;
24 | 


--------------------------------------------------------------------------------
/src/feature/Kyc/style.scss:
--------------------------------------------------------------------------------
 1 | .create-kyc-container {
 2 |   .create-kyc-header {
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     padding: 64px
 7 |   }
 8 |   .kyc-item {
 9 |     text-align: left;
10 |     font-size: 0.875rem;
11 |     p {
12 |       margin-bottom: 8px;
13 |     }
14 |     .header {
15 |       text-align: left;
16 |       font-size: 1.14285714em;
17 |       font-style: inherit;
18 |       font-weight: 600;
19 |       line-height: 1.25;
20 |       letter-spacing: -0.006em;
21 |       border-bottom: 1px solid #e9ecef
22 |     }
23 |   }
24 | }


--------------------------------------------------------------------------------
/src/feature/Kyc/util.js:
--------------------------------------------------------------------------------
  1 | import { cloneDeep } from 'lodash';
  2 | 
  3 | const grid = 12;
  4 | 
  5 | export const getListStyle = isDraggingOver => ({
  6 |   background: isDraggingOver ? 'rbg(217, 252, 255)' : '#e9ecef',
  7 |   padding: grid,
  8 |   width: 500,
  9 |   minHeight: 200,
 10 |   borderRadius: 4,
 11 |   border: 1,
 12 |   borderStyle: 'solid',
 13 |   borderColor: '#ced4da',
 14 | });
 15 | 
 16 | export const getItemStyle = (isDragging, draggableStyle) => ({
 17 |   // some basic styles to make the items look a bit nicer
 18 |   userSelect: 'none',
 19 |   padding: grid,
 20 |   margin: `0 0 ${grid}px 0`,
 21 |   border: 1,
 22 |   borderStyle: 'solid',
 23 |   borderColor: '#ced4da',
 24 |   borderRadius: 4,
 25 |   color: isDragging ? '#fff' : 'rgba(0, 0, 0, 0.87)',
 26 | 
 27 |   // change background colour if dragging
 28 |   background: isDragging ? '#2196f3' : 'white',
 29 | 
 30 |   // styles we need to apply on draggables
 31 |   ...draggableStyle,
 32 | });
 33 | 
 34 | // a little function to help us with reordering the result
 35 | export const reorder = (list, startIndex, endIndex) => {
 36 |   const result = Array.from(list);
 37 |   const [removed] = result.splice(startIndex, 1);
 38 |   result.splice(endIndex, 0, removed);
 39 | 
 40 |   return result;
 41 | };
 42 | 
 43 | export const isPool = ({ droppableId }) => droppableId === 'pool';
 44 | 
 45 | const notId = id => item => item.id !== id;
 46 | 
 47 | const removeKycInput = ({ droppableId }) => inputId => (kyc) => {
 48 |   if (droppableId !== String(kyc.id)) {
 49 |     return kyc;
 50 |   }
 51 |   const replaced = kyc.config.filter(notId(inputId));
 52 |   return {
 53 |     ...kyc,
 54 |     config: replaced,
 55 |   };
 56 | };
 57 | 
 58 | const removeSource = (source, removed, droppableSource) => {
 59 |   if (isPool(droppableSource)) {
 60 |     const newSource = source.config.filter(notId(removed.id));
 61 |     return {
 62 |       type: 'pool',
 63 |       config: newSource,
 64 |     };
 65 |   }
 66 |   const newSource = source.map(removeKycInput(droppableSource)(removed.id));
 67 |   return {
 68 |     config: newSource,
 69 |   };
 70 | };
 71 | 
 72 | const addKycInput = ({ droppableId, index }) => added => (kyc) => {
 73 |   if (droppableId !== String(kyc.id)) {
 74 |     return kyc;
 75 |   }
 76 |   kyc.config.splice(index, 0, added);
 77 |   return kyc;
 78 | };
 79 | 
 80 | const addDestination = (destination, added, droppableDestination) => {
 81 |   if (droppableDestination.droppableId === 'pool') {
 82 |     destination.config.splice(droppableDestination.index, 0, added);
 83 |     return {
 84 |       type: 'pool',
 85 |       config: destination,
 86 |     };
 87 |   }
 88 | 
 89 |   const newDestination = destination.map(addKycInput(droppableDestination)(added));
 90 |   return {
 91 |     config: newDestination,
 92 |   };
 93 | };
 94 | 
 95 | const identifySelectedInput = (source, droppableSource) => {
 96 |   if (isPool(droppableSource)) {
 97 |     const [selected] = source.config.splice(droppableSource.index, 1);
 98 |     return selected;
 99 |   }
100 |   const selectedKyc = source.find(({ id }) => String(id) === droppableSource.droppableId);
101 |   const [selected] = selectedKyc.config.splice(droppableSource.index, 1);
102 |   return selected;
103 | };
104 | 
105 | /**
106 |  * Moves an item from one list to another list.
107 |  */
108 | export const move = (pool, kyc, droppableSource, droppableDestination) => {
109 |   const { source, destination } = isPool(droppableSource)
110 |     ? {
111 |       source: cloneDeep(pool),
112 |       destination: cloneDeep(kyc),
113 |     } : isPool(droppableDestination)
114 |       ? {
115 |         source: cloneDeep(kyc),
116 |         destination: cloneDeep(pool),
117 |       } : {
118 |         source: cloneDeep(kyc),
119 |         destination: cloneDeep(kyc),
120 |       };
121 | 
122 |   const selected = identifySelectedInput(cloneDeep(source), droppableSource);
123 |   const newSource = removeSource(cloneDeep(source), selected, droppableSource);
124 |   const newDestination = addDestination(cloneDeep(destination), selected, droppableDestination);
125 | 
126 |   return {
127 |     newSource,
128 |     newDestination,
129 |   };
130 | };
131 | 
132 | export const replaceByKycId = kycId => replaced => kyc => ((String(kyc.id) === kycId)
133 |   ? {
134 |     ...kyc,
135 |     config: replaced,
136 |   }
137 |   : kyc
138 | );
139 | 


--------------------------------------------------------------------------------
/src/feature/Loading/Container.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { CircleLoader } from 'react-spinners';
 3 | import PropTypes from 'prop-types';
 4 | import { connect } from 'react-redux';
 5 | import './style.scss';
 6 | 
 7 | class Loading extends React.Component {
 8 |   static propTypes = {
 9 |     status: PropTypes.bool.isRequired,
10 |   }
11 | 
12 |   render() {
13 |     const { status } = this.props;
14 | 
15 |     return (
16 |       <div>
17 |         {status
18 |           && (
19 |           <div className="sweet-loading">
20 |             <CircleLoader
21 |               color="#D0021B"
22 |               size={100}
23 |               height={150}
24 |               loading={status}
25 |             />
26 |           </div>
27 |           )
28 |         }
29 |       </div>
30 |     );
31 |   }
32 | }
33 | 
34 | const mapStoreToProps = ({ loadingModal }) => {
35 |   const { status } = loadingModal;
36 |   return {
37 |     status,
38 |   };
39 | };
40 | 
41 | export default connect(mapStoreToProps)(Loading);
42 | 


--------------------------------------------------------------------------------
/src/feature/Loading/index.js:
--------------------------------------------------------------------------------
 1 | import Loading from './Container';
 2 | import loadingReducer from './redux/reducer';
 3 | import { loadingAction } from './redux/action';
 4 | 
 5 | export {
 6 |   Loading,
 7 |   loadingReducer,
 8 |   loadingAction,
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/feature/Loading/redux/action.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   SHOW_LOADING,
 3 |   HIDE_LOADING,
 4 | } from './reducer';
 5 | 
 6 | export const showLoading = () => ({ type: SHOW_LOADING });
 7 | export const hideLoading = () => ({ type: HIDE_LOADING });
 8 | 
 9 | export const loadingAction = callback => async (dispatch) => {
10 |   try {
11 |     dispatch(showLoading());
12 |     const response = await callback();
13 |     dispatch(hideLoading());
14 |     return response;
15 |   } catch (error) {
16 |     dispatch(hideLoading());
17 |     if (error.response) {
18 |       throw error.response.data;
19 |     }
20 |     throw error;
21 |   }
22 | };
23 | 


--------------------------------------------------------------------------------
/src/feature/Loading/redux/reducer.js:
--------------------------------------------------------------------------------
 1 | export const SHOW_LOADING = 'KYC/LOADING/SHOW';
 2 | export const HIDE_LOADING = 'KYC/LOADING/HIDE';
 3 | 
 4 | const initialState = {
 5 |   status: false,
 6 | };
 7 | 
 8 | const reducer = (state = initialState, { type }) => {
 9 |   switch (type) {
10 |     case SHOW_LOADING:
11 |       return {
12 |         ...state,
13 |         status: true,
14 |       };
15 |     case HIDE_LOADING:
16 |       return {
17 |         ...state,
18 |         status: false,
19 |       };
20 |     default:
21 |       return state;
22 |   }
23 | };
24 | 
25 | export default reducer;
26 | 


--------------------------------------------------------------------------------
/src/feature/Loading/style.scss:
--------------------------------------------------------------------------------
 1 | .sweet-loading {
 2 |   z-index: 999999;
 3 |   background: black;
 4 |   opacity: .7;
 5 |   position: fixed;
 6 |   height: 100%;
 7 |   width: 100%;
 8 |   left: 0;
 9 |   top: 0;
10 |   &>div {
11 |     width: 100px;
12 |     height: 80px;
13 |     text-align: center;
14 |     font-size: 10px;
15 |     position: absolute;
16 |     left: 0;
17 |     right: 0;
18 |     margin: auto;
19 |     top: 0;
20 |     bottom: 0;
21 |   }
22 | }


--------------------------------------------------------------------------------
/src/feature/Login/Container.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { bindActionCreators } from 'redux';
 4 | import { withRouter, Link } from 'react-router-dom';
 5 | import { connect } from 'react-redux';
 6 | import { Loading, loadingAction } from 'feature';
 7 | import Helper from 'lib/helper';
 8 | import LoginForm from './component/LoginForm';
 9 | import { ModalFails } from './component/Modal';
10 | // import { login } from './api';
11 | import { storeAuthLogin } from './redux/action';
12 | 
13 | class Login extends Component {
14 |   static propTypes = {
15 |     history: PropTypes.any.isRequired,
16 |     match: PropTypes.object.isRequired,
17 |   };
18 | 
19 |   constructor(props) {
20 |     super(props);
21 |     this.state = {
22 |       mgsError: '',
23 |       open: false,
24 |     };
25 |     const {
26 |       match: {
27 |         params: { nameApp },
28 |       },
29 |     } = this.props;
30 |     this.hookNameApp = nameApp;
31 |   }
32 | 
33 |   componentWillMount() {
34 |     const { history } = this.props;
35 |     Helper.setStorage('nameApp', this.hookNameApp);
36 |     const cookie = Helper.getCookie();
37 |     if (cookie) history.push('profile');
38 |   }
39 | 
40 |   handleCloseModal = () => {
41 |     this.setState({ open: false });
42 |   };
43 | 
44 |   handleResend = () => {
45 |     console.log('send email again.');
46 |   };
47 | 
48 |   handleSubmit = async () => {
49 |     const { history } = this.props;
50 |     // history.push(`/${this.hookNameApp}`);
51 |     history.push('/profile');
52 |     // try {
53 |     //   // storeAuthLogin: save data into redux: // storeAuthLogin(data);
54 |     //   // eslint-disable-next-line no-unused-vars
55 |     //   const { loadingAction, storeAuthLogin, history } = this.props;
56 |     //   await loadingAction(() => login(this.hookNameApp, payload));
57 |     //   const cookie = Helper.getCookie();
58 |     //   if (cookie) history.push(`/${this.hookNameApp}`);
59 |     // } catch (error) {
60 |     //   this.setState({
61 |     //     mgsError: error.message,
62 |     //   });
63 |     // }
64 |   };
65 | 
66 |   render() {
67 |     const { mgsError, open } = this.state;
68 |     return (
69 |       <div>
70 |         <div className="c-activities">
71 |           <div className="c-activities__container">
72 |             <h2 className="c-activities__heading">LOGIN</h2>
73 |             <div className="c-text c-text--error">{mgsError}</div>
74 |             <LoginForm onSubmit={this.handleSubmit} />
75 |             <div className="c-activities__options">
76 |               <Link to="register">Register?</Link>
77 |               <Link to="forgot-password">Forgot Password?</Link>
78 |             </div>
79 |           </div>
80 |         </div>
81 |         <Loading />
82 |         <ModalFails open={open} handleCloseModal={this.handleCloseModal} handleResend={this.handleResend} />
83 |       </div>
84 |     );
85 |   }
86 | }
87 | const mapDispatchToProps = dispatch =>
88 |   bindActionCreators(
89 |     {
90 |       loadingAction,
91 |       storeAuthLogin,
92 |     },
93 |     dispatch,
94 |   );
95 | 
96 | export default withRouter(connect(null, mapDispatchToProps)(Login));
97 | 


--------------------------------------------------------------------------------
/src/feature/Login/api.js:
--------------------------------------------------------------------------------
1 | import { kycHttp, urlApi } from 'service';
2 | 
3 | export const login = async (domainApp, payload) => {
4 |   const { data } = await kycHttp.post({ path: `kyc/${domainApp}/${urlApi.customer.login}`, payload });
5 |   return data;
6 | };
7 | 


--------------------------------------------------------------------------------
/src/feature/Login/component/LoginForm/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { reduxForm, Field, propTypes } from 'redux-form';
 3 | import { FormInput } from 'component';
 4 | import Button from '@material-ui/core/Button';
 5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 6 | import validate from './validation';
 7 | 
 8 | class LoginForm extends Component {
 9 |     static propTypes = {
10 |       ...propTypes,
11 |     };
12 | 
13 |     render() {
14 |       const {
15 |         handleSubmit,
16 |       } = this.props;
17 | 
18 |       return (
19 |         <div>
20 |           <form className="c-activities__form" onSubmit={handleSubmit}>
21 |             <div className="c-form__row">
22 |               <Field
23 |                 name="email"
24 |                 placeholder="Email address"
25 |                 type="text"
26 |                 component={FormInput}
27 |                 label="Email"
28 |               />
29 |             </div>
30 |             <div className="c-form__row">
31 |               <Field
32 |                 id="password"
33 |                 name="password"
34 |                 type="password"
35 |                 component={FormInput}
36 |                 label="Password"
37 |                 eyesPassword
38 |               />
39 |             </div>
40 |             <div className="c-activities__button text-center">
41 |               <Button type="submit" variant="outlined" color="primary">
42 |                 <FontAwesomeIcon icon="unlock" />
43 |                 LOGIN
44 |               </Button>
45 |             </div>
46 |           </form>
47 |         </div>
48 |       );
49 |     }
50 | }
51 | 
52 | export default reduxForm({
53 |   form: 'login',
54 |   validate,
55 | })(LoginForm);
56 | 


--------------------------------------------------------------------------------
/src/feature/Login/component/LoginForm/validation.js:
--------------------------------------------------------------------------------
 1 | import memoize from 'lru-memoize';
 2 | import {
 3 |   createValidator,
 4 |   required,
 5 |   email,
 6 | } from 'lib/validation';
 7 | 
 8 | const loginValidation = createValidator({
 9 |   email: [required, email],
10 |   password: [required],
11 | });
12 | export default memoize(10)(loginValidation);
13 | 


--------------------------------------------------------------------------------
/src/feature/Login/component/Modal/ModalFails.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | import Button from '@material-ui/core/Button';
 5 | import ReportIcon from '@material-ui/icons/Report';
 6 | 
 7 | const ModalFails = ({ open, handleResend, handleCloseModal }) => (
 8 |   <div className={open ? 'c-modal c-modal--visible' : 'c-modal'}>
 9 |     <div className="c-modal__content">
10 |       <div className="c-modal__title">
11 |         <div className="c-modal__align--center">
12 |           <div className="c-modal__svg c-modal__svg--error"><ReportIcon /></div>
13 |           <div className="c-modal__lead c-modal__lead--error">Account not Activate!</div>
14 |         </div>
15 |       </div>
16 |       <div className="c-modal__middle">
17 |         Please click
18 |         <b>
19 |           &quot;Resend&quot;
20 |         </b>
21 |         to get activation email.
22 |       </div>
23 |       <div className="c-modal__footer c-modal__footer--right">
24 |         <Button className="c-button" variant="contained" color="primary" onClick={handleResend}> Resend </Button>
25 |         <Button className="c-button" variant="contained" color="secondary" onClick={handleCloseModal}> Close </Button>
26 |       </div>
27 |     </div>
28 |   </div>
29 | );
30 | 
31 | ModalFails.propTypes = {
32 |   open: PropTypes.bool.isRequired,
33 |   handleCloseModal: PropTypes.func.isRequired,
34 |   handleResend: PropTypes.func.isRequired,
35 | };
36 | 
37 | export default ModalFails;
38 | 


--------------------------------------------------------------------------------
/src/feature/Login/component/Modal/index.js:
--------------------------------------------------------------------------------
1 | import ModalFails from './ModalFails';
2 | 
3 | export {
4 |   ModalFails,
5 | };
6 | 


--------------------------------------------------------------------------------
/src/feature/Login/index.js:
--------------------------------------------------------------------------------
 1 | import Login from './Container';
 2 | import authReducer from './redux/reducer';
 3 | import { storeAuthLogin } from './redux/action';
 4 | 
 5 | export default Login;
 6 | 
 7 | export {
 8 |   authReducer,
 9 |   storeAuthLogin,
10 | };
11 | 


--------------------------------------------------------------------------------
/src/feature/Login/redux/action.js:
--------------------------------------------------------------------------------
1 | import {
2 |   AUTH_LOGIN,
3 |   AUTH_LOGOUT,
4 | } from './reducer';
5 | 
6 | export const storeAuthLogin = payload => ({ type: AUTH_LOGIN, payload });
7 | 
8 | export const storeAuthLogout = () => ({ type: AUTH_LOGOUT });
9 | 


--------------------------------------------------------------------------------
/src/feature/Login/redux/reducer.js:
--------------------------------------------------------------------------------
 1 | // import jwtDecode from 'jwt-decode';
 2 | 
 3 | export const AUTH_LOGIN = 'KYC/AUTH/LOGIN';
 4 | export const AUTH_LOGOUT = 'KYC/AUTH/LOGOUT';
 5 | 
 6 | const initialState = {
 7 |   user: undefined,
 8 | };
 9 | 
10 | const reducer = (state = initialState, { type, payload }) => {
11 |   switch (type) {
12 |     case AUTH_LOGIN:
13 |       return {
14 |         ...state,
15 |         user: payload,
16 |       };
17 |     case AUTH_LOGOUT:
18 |       return initialState;
19 |     default:
20 |       return state;
21 |   }
22 | };
23 | 
24 | export default reducer;
25 | 


--------------------------------------------------------------------------------
/src/feature/Profile/Container.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | import Helper from 'lib/helper';
 4 | 
 5 | class Profile extends Component {
 6 |   constructor() {
 7 |     super();
 8 |     this.state = {
 9 |       email: '',
10 |       status: '',
11 |     };
12 |   }
13 | 
14 |   componentWillMount() {
15 |     const user = JSON.parse(Helper.getStorage(process.env.USER_STORAGE));
16 |     if (user) {
17 |       this.setState({
18 |         email: user.email,
19 |         status: user.status,
20 |       });
21 |     }
22 |   }
23 | 
24 |   render() {
25 |     const { email, status } = this.state;
26 |     return (
27 |       <div>
28 |         <div className="c-row">
29 |           <div className="col-lg-2 col-md-4 col-sm-12">Status:</div>
30 |           <div className="col-lg-10 col-md-8 col-sm-12">
31 |             <span className={`c-text__status is-${status}`}>{status}</span>
32 |           </div>
33 |         </div>
34 |         <div className="c-row__line" />
35 |         <div className="c-row">
36 |           <div className="col-lg-2 col-md-4 col-sm-12">Email Address:</div>
37 |           <div className="col-lg-10 col-md-8 col-sm-12">{email}</div>
38 |         </div>
39 |       </div>
40 |     );
41 |   }
42 | }
43 | 
44 | export default Profile;
45 | 


--------------------------------------------------------------------------------
/src/feature/Profile/index.js:
--------------------------------------------------------------------------------
1 | import Profile from './Container';
2 | 
3 | export default Profile;
4 | 


--------------------------------------------------------------------------------
/src/feature/Register/Container.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { bindActionCreators } from 'redux';
 4 | import { connect } from 'react-redux';
 5 | import { withRouter, Link } from 'react-router-dom';
 6 | import { Loading, loadingAction } from 'feature';
 7 | import Helper from 'lib/helper';
 8 | import RegisterForm from './component/RegisterForm';
 9 | import { register } from './api';
10 | import { ModalSuccess } from './component/Modal';
11 | 
12 | class Register extends Component {
13 |   static propTypes = {
14 |     history: PropTypes.any.isRequired,
15 |     match: PropTypes.object.isRequired,
16 |   }
17 | 
18 |   constructor() {
19 |     super();
20 |     this.state = {
21 |       mgsError: '',
22 |       open: false,
23 |     };
24 |   }
25 | 
26 |   componentWillMount() {
27 |     const { history, match: { params: { nameApp } } } = this.props;
28 |     Helper.setStorage('nameApp', nameApp);
29 |     const cookie = Helper.getCookie();
30 |     if (cookie) history.push('profile');
31 |   }
32 | 
33 |   handleBackLogin = () => {
34 |     const { history } = this.props;
35 |     history.push('login');
36 |   }
37 | 
38 |   handleSubmit = async (payload) => {
39 |     const nameApp = Helper.getStorage('nameApp');
40 |     try {
41 |       const { loadingAction } = this.props;
42 |       const user = await loadingAction(() => register(nameApp, payload));
43 |       if (user.data) {
44 |         this.setState({ open: true });
45 |       }
46 |     } catch (error) {
47 |       this.setState({ mgsError: error.message });
48 |     }
49 |   }
50 | 
51 |   render() {
52 |     const { mgsError, open } = this.state;
53 |     return (
54 |       <div>
55 |         <div className="c-activities">
56 |           <div className="c-activities__container">
57 |             <h2 className="c-activities__heading">REGISTER</h2>
58 |             <div className="c-text c-text--error">{mgsError}</div>
59 |             <RegisterForm
60 |               onSubmit={this.handleSubmit}
61 |             />
62 |             <div className="c-activities__options c-activities__options--center">
63 |               <Link to="login">Login?</Link>
64 |             </div>
65 |           </div>
66 |           <Loading />
67 |           <ModalSuccess
68 |             open={open}
69 |             handleBackLogin={this.handleBackLogin}
70 |           />
71 |         </div>
72 |       </div>
73 |     );
74 |   }
75 | }
76 | 
77 | const mapDispatchToProps = dispatch => (
78 |   bindActionCreators({
79 |     loadingAction,
80 |   }, dispatch)
81 | );
82 | 
83 | export default withRouter(connect(null, mapDispatchToProps)(Register));
84 | 


--------------------------------------------------------------------------------
/src/feature/Register/api.js:
--------------------------------------------------------------------------------
1 | import { kycHttp, urlApi } from 'service';
2 | 
3 | export const register = async (nameApp, payload) => {
4 |   const { data } = await kycHttp.post({ path: `kyc/${nameApp}/${urlApi.customer.register}`, payload });
5 |   return data;
6 | };
7 | 


--------------------------------------------------------------------------------
/src/feature/Register/component/Modal/ModalSuccess.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | import { ModalSuccessWrapper } from 'component';
 5 | 
 6 | import Button from '@material-ui/core/Button';
 7 | 
 8 | const ModalSuccess = ({ open, handleBackLogin }) => (
 9 |   <ModalSuccessWrapper open={open} message="Thank you for register! We sent a confirmation email to your email address. Please follow its contained instructions to complete your registration.">
10 |     <Button className="c-button" variant="contained" color="primary" onClick={handleBackLogin}> Back to Login </Button>
11 |   </ModalSuccessWrapper>
12 | );
13 | 
14 | ModalSuccess.propTypes = {
15 |   open: PropTypes.bool.isRequired,
16 |   handleBackLogin: PropTypes.func.isRequired,
17 | };
18 | 
19 | export default ModalSuccess;
20 | 


--------------------------------------------------------------------------------
/src/feature/Register/component/Modal/index.js:
--------------------------------------------------------------------------------
1 | import ModalSuccess from './ModalSuccess';
2 | 
3 | export {
4 |   ModalSuccess,
5 | };
6 | 


--------------------------------------------------------------------------------
/src/feature/Register/component/RegisterForm/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { reduxForm, Field, propTypes } from 'redux-form';
 3 | import { FormInput } from 'component';
 4 | import Button from '@material-ui/core/Button';
 5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 6 | import validate from './validation';
 7 | 
 8 | class RegisterForm extends Component {
 9 |     static propTypes = {
10 |       ...propTypes,
11 |     };
12 | 
13 |     render() {
14 |       const {
15 |         handleSubmit,
16 |       } = this.props;
17 | 
18 |       return (
19 |         <div>
20 |           <form className="c-activities__form" onSubmit={handleSubmit}>
21 |             <div className="c-form__row">
22 |               <Field
23 |                 name="email"
24 |                 type="text"
25 |                 component={FormInput}
26 |                 label="Email"
27 |               />
28 |             </div>
29 |             <div className="c-form__row">
30 |               <Field
31 |                 id="password"
32 |                 name="password"
33 |                 type="password"
34 |                 component={FormInput}
35 |                 label="Password"
36 |                 eyesPassword
37 |               />
38 |             </div>
39 |             <div className="c-form__row">
40 |               <Field
41 |                 id="confirm_password"
42 |                 name="passwordConfirmation"
43 |                 type="password"
44 |                 component={FormInput}
45 |                 label="Confirm Password"
46 |                 eyesPassword
47 |               />
48 |             </div>
49 |             <div className="c-activities__button text-center">
50 |               <Button type="submit" variant="outlined" color="primary">
51 |                 <FontAwesomeIcon icon="user-plus" />
52 |                 REGISTER
53 |               </Button>
54 |             </div>
55 |           </form>
56 |         </div>
57 |       );
58 |     }
59 | }
60 | 
61 | export default reduxForm({
62 |   form: 'register',
63 |   validate,
64 | })(RegisterForm);
65 | 


--------------------------------------------------------------------------------
/src/feature/Register/component/RegisterForm/validation.js:
--------------------------------------------------------------------------------
 1 | import memoize from 'lru-memoize';
 2 | import {
 3 |   createValidator,
 4 |   required,
 5 |   email,
 6 |   match,
 7 | } from 'lib/validation';
 8 | 
 9 | const loginValidation = createValidator({
10 |   email: [required, email],
11 |   password: [required],
12 |   passwordConfirmation: [required, match('password', "Confirm password doesn't match")],
13 | });
14 | export default memoize(10)(loginValidation);
15 | 


--------------------------------------------------------------------------------
/src/feature/Register/index.js:
--------------------------------------------------------------------------------
1 | import Login from './Container';
2 | 
3 | export default Login;
4 | 


--------------------------------------------------------------------------------
/src/feature/ResetPassword/Container.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { bindActionCreators } from 'redux';
 4 | import { connect } from 'react-redux';
 5 | import { withRouter, Link } from 'react-router-dom';
 6 | import { Loading, loadingAction } from 'feature';
 7 | import Helper from 'lib/helper';
 8 | import { resetPassword } from './api';
 9 | import ResetForm from './component/ResetForm';
10 | import { ModalSuccess } from './component/Modal';
11 | 
12 | class ResetPassword extends Component {
13 |   static propTypes = {
14 |     history: PropTypes.any.isRequired,
15 |     match: PropTypes.object.isRequired,
16 |   }
17 | 
18 |   constructor() {
19 |     super();
20 |     this.state = {
21 |       mgsError: '',
22 |       open: false,
23 |     };
24 |   }
25 | 
26 |   componentWillMount() {
27 |     const { history, match: { params: { nameApp } } } = this.props;
28 |     Helper.setStorage('nameApp', nameApp);
29 |     const cookie = Helper.getCookie();
30 |     if (cookie) history.push('profile');
31 |   }
32 | 
33 |   handleBackLogin = () => {
34 |     const { history } = this.props;
35 |     history.push('login');
36 |   }
37 | 
38 |   handleSubmit = async (payload) => {
39 |     try {
40 |       const { loadingAction } = this.props;
41 |       await loadingAction(() => resetPassword(payload));
42 |       this.setState({ open: true });
43 |     } catch (error) {
44 |       this.setState({ mgsError: error.message });
45 |     }
46 |   }
47 | 
48 |   render() {
49 |     const { mgsError, open } = this.state;
50 |     return (
51 |       <div>
52 |         <div className="c-activities">
53 |           <div className="c-activities__container">
54 |             <h2 className="c-activities__heading">RESET PASSWORD</h2>
55 |             <div className="c-text c-text--error">{mgsError}</div>
56 |             <ResetForm
57 |               onSubmit={this.handleSubmit}
58 |             />
59 |             <div className="c-activities__options c-activities__options--center">
60 |               <Link to="login">Login?</Link>
61 |             </div>
62 |           </div>
63 |           <Loading />
64 |           <ModalSuccess
65 |             open={open}
66 |             handleBackLogin={this.handleBackLogin}
67 |           />
68 |         </div>
69 |       </div>
70 |     );
71 |   }
72 | }
73 | 
74 | const mapDispatchToProps = dispatch => (
75 |   bindActionCreators({
76 |     loadingAction,
77 |   }, dispatch)
78 | );
79 | 
80 | export default withRouter(connect(null, mapDispatchToProps)(ResetPassword));
81 | 


--------------------------------------------------------------------------------
/src/feature/ResetPassword/api.js:
--------------------------------------------------------------------------------
1 | import { kycHttp, urlApi } from 'service';
2 | 
3 | export const resetPassword = async (payload) => {
4 |   const { data } = kycHttp.post({ path: `${urlApi.customer.resetPassword}`, payload });
5 |   return data;
6 | };
7 | 


--------------------------------------------------------------------------------
/src/feature/ResetPassword/component/Modal/ModalSuccess.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | import { ModalSuccessWrapper } from 'component';
 5 | 
 6 | import Button from '@material-ui/core/Button';
 7 | 
 8 | const ModalSuccess = ({ open, handleBackLogin }) => (
 9 |   <ModalSuccessWrapper open={open} message="Your password has been reset successfully!">
10 |     <Button className="c-button" variant="contained" color="primary" onClick={handleBackLogin}> Back to Login </Button>
11 |   </ModalSuccessWrapper>
12 | );
13 | 
14 | ModalSuccess.propTypes = {
15 |   open: PropTypes.bool.isRequired,
16 |   handleBackLogin: PropTypes.func.isRequired,
17 | };
18 | 
19 | export default ModalSuccess;
20 | 


--------------------------------------------------------------------------------
/src/feature/ResetPassword/component/Modal/index.js:
--------------------------------------------------------------------------------
1 | import ModalSuccess from './ModalSuccess';
2 | 
3 | export {
4 |   ModalSuccess,
5 | };
6 | 


--------------------------------------------------------------------------------
/src/feature/ResetPassword/component/ResetForm/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { reduxForm, Field, propTypes } from 'redux-form';
 3 | import { FormInput } from 'component';
 4 | import Button from '@material-ui/core/Button';
 5 | import validate from './validation';
 6 | 
 7 | class ResetForm extends Component {
 8 |     static propTypes = {
 9 |       ...propTypes,
10 |     };
11 | 
12 |     render() {
13 |       const {
14 |         handleSubmit,
15 |       } = this.props;
16 | 
17 |       return (
18 |         <div>
19 |           <form className="c-activities__form" onSubmit={handleSubmit}>
20 |             <div className="c-form__row">
21 |               <Field
22 |                 id="password"
23 |                 name="password"
24 |                 type="password"
25 |                 component={FormInput}
26 |                 label="Password"
27 |                 eyesPassword
28 |               />
29 |             </div>
30 |             <div className="c-form__row">
31 |               <Field
32 |                 id="confirm_password"
33 |                 name="passwordConfirmation"
34 |                 type="password"
35 |                 component={FormInput}
36 |                 label="Confirm Password"
37 |                 eyesPassword
38 |               />
39 |             </div>
40 |             <div className="c-activities__button text-center">
41 |               <Button type="submit" variant="outlined" color="primary">
42 |                 SUBMIT
43 |               </Button>
44 |             </div>
45 |           </form>
46 |         </div>
47 |       );
48 |     }
49 | }
50 | 
51 | export default reduxForm({
52 |   form: 'reset',
53 |   validate,
54 | })(ResetForm);
55 | 


--------------------------------------------------------------------------------
/src/feature/ResetPassword/component/ResetForm/validation.js:
--------------------------------------------------------------------------------
 1 | import memoize from 'lru-memoize';
 2 | import {
 3 |   createValidator,
 4 |   required,
 5 |   match,
 6 | } from 'lib/validation';
 7 | 
 8 | const resetValidation = createValidator({
 9 |   password: [required],
10 |   passwordConfirmation: [required, match('password', "Confirm password does'nt match")],
11 | });
12 | export default memoize(10)(resetValidation);
13 | 


--------------------------------------------------------------------------------
/src/feature/ResetPassword/index.js:
--------------------------------------------------------------------------------
1 | import ResetPassword from './Container';
2 | 
3 | export default ResetPassword;
4 | 


--------------------------------------------------------------------------------
/src/feature/index.js:
--------------------------------------------------------------------------------
 1 | import App from './App';
 2 | import Login from './Login';
 3 | import Register from './Register';
 4 | import ChangePassword from './ChangePassword';
 5 | import ForgotPassword from './ForgotPassword';
 6 | import ResetPassword from './ResetPassword';
 7 | import Profile from './Profile';
 8 | import Kyc from './Kyc';
 9 | import { Loading, loadingAction } from './Loading';
10 | 
11 | export { App, Kyc, Login, Register, Profile, ChangePassword, ForgotPassword, ResetPassword, Loading, loadingAction };
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { BrowserRouter, Switch, Route } from 'react-router-dom';
 4 | 
 5 | import { Provider } from 'react-redux';
 6 | import thunk from 'redux-thunk';
 7 | import createHistory from 'history/createBrowserHistory';
 8 | import { applyMiddleware, compose, createStore } from 'redux';
 9 | import { connectRouter, routerMiddleware } from 'connected-react-router';
10 | 
11 | import getMuiTheme from 'material-ui/styles/getMuiTheme';
12 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
13 | 
14 | import { App, Login, Register, ForgotPassword, ResetPassword } from 'feature';
15 | import combinedReducers from './reducer';
16 | import * as serviceWorker from './serviceWorker';
17 | 
18 | import './scss/index.scss';
19 | 
20 | const history = createHistory();
21 | const middleware = routerMiddleware(history);
22 | 
23 | // const composeEnhancers = process.env.NODE_ENV === 'production'
24 | //   ? compose
25 | //   : window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === undefined // eslint-disable-line
26 | //     ? compose
27 | //     : window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; // eslint-disable-line
28 | const composeEnhancers =
29 |   process.env.NODE_ENV === 'development' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
30 | 
31 | const store = createStore(
32 |   connectRouter(history)(combinedReducers),
33 |   composeEnhancers(
34 |     applyMiddleware(routerMiddleware(history)),
35 |     applyMiddleware(middleware),
36 |     applyMiddleware(thunk),
37 |     // applyMiddleware(epicMiddleware),
38 |   ),
39 | );
40 | 
41 | const ReactApp = () => {
42 |   console.log('app re-render app');
43 |   return (
44 |     <BrowserRouter>
45 |       <Provider store={store}>
46 |         <MuiThemeProvider muiTheme={getMuiTheme()}>
47 |           <Switch>
48 |             <Route exact path="/login" component={Login} />
49 |             <Route exact path="/register" component={Register} />
50 |             <Route exact path="/forgot-password" component={ForgotPassword} />
51 |             <Route exact path="/reset-password" component={ResetPassword} />
52 |             <Route path="/" component={App} />
53 |           </Switch>
54 |         </MuiThemeProvider>
55 |       </Provider>
56 |     </BrowserRouter>
57 |   );
58 | };
59 | 
60 | ReactDOM.render(<ReactApp />, document.getElementById('root'));
61 | 
62 | // If you want your app to work offline and load faster, you can change
63 | // unregister() to register() below. Note this comes with some pitfalls.
64 | // Learn more about service workers: http://bit.ly/CRA-PWA
65 | serviceWorker.unregister();
66 | 


--------------------------------------------------------------------------------
/src/lib/PoolKyc/index.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   {
 3 |     id: 1,
 4 |     inputType: 'TextField',
 5 |     name: 'email',
 6 |     label: 'Email',
 7 |     validate: ['required', 'email'],
 8 |   },
 9 |   {
10 |     id: 2,
11 |     inputType: 'TextField',
12 |     name: 'firstName',
13 |     label: 'First Name',
14 |     validate: ['required'],
15 |   },
16 |   {
17 |     id: 3,
18 |     inputType: 'TextField',
19 |     name: 'lastName',
20 |     label: 'Last Name',
21 |     validate: ['required'],
22 |   },
23 |   {
24 |     id: 4,
25 |     inputType: 'TextField',
26 |     name: 'password',
27 |     label: 'Password',
28 |     validate: ['required'],
29 |   },
30 |   {
31 |     id: 5,
32 |     inputType: 'TextField',
33 |     name: 'phone',
34 |     label: 'Phone Number',
35 |     validate: ['required'],
36 |   },
37 | ];
38 | 


--------------------------------------------------------------------------------
/src/lib/helper.js:
--------------------------------------------------------------------------------
 1 | const helper = {};
 2 | 
 3 | /*
 4 | * function cookie
 5 | *
 6 | */
 7 | 
 8 | helper.getCookie = () => {
 9 |   const name = process.env.COOKIE_NAME;
10 |   const cookie = document.cookie.split(';');
11 |   for (let i = 0; i < cookie.length; i += 1) {
12 |     let c = cookie[i];
13 |     while (c.charAt(0) === ' ') {
14 |       c = c.substring(1);
15 |     }
16 |     if (c.indexOf(name) === 0) {
17 |       return c.substring(name.length, c.length);
18 |     }
19 |   }
20 |   return '';
21 | };
22 | 
23 | helper.removeCookie = () => {
24 |   document.cookie = `${process.env.COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
25 | };
26 | 
27 | /*
28 | * function localstorage
29 | *
30 | */
31 | 
32 | helper.setStorage = (key, value) => {
33 |   window.localStorage.setItem(key, value);
34 | };
35 | 
36 | helper.getStorage = key => window.localStorage.getItem(key);
37 | 
38 | helper.removeStorage = key => window.localStorage.removeItem(key);
39 | 
40 | export default helper;
41 | 


--------------------------------------------------------------------------------
/src/lib/validation.js:
--------------------------------------------------------------------------------
  1 | const isEmpty = value => value === undefined || value === null || value === '';
  2 | const join = rules => (value, data, params) => rules.map(rule => rule(value, data, params)).filter(error => !!error)[0];
  3 | 
  4 | export const email = (value) => {
  5 |   // Let's not start a debate on email regex. This is just for an example app!
  6 |   if (!isEmpty(value) && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
  7 |     return 'Invalid email address';
  8 |   }
  9 |   return false;
 10 | };
 11 | 
 12 | export const required = (value) => {
 13 |   if (isEmpty(value)) {
 14 |     return 'This field is required';
 15 |   }
 16 |   return false;
 17 | };
 18 | 
 19 | export const min = min => (value) => {
 20 |   if (!isEmpty(value) && value.length < min) {
 21 |     return `Must be at least ${min} characters`;
 22 |   }
 23 |   return false;
 24 | };
 25 | 
 26 | export const max = max => (value) => {
 27 |   if (!isEmpty(value) && value.length > max) {
 28 |     return `Must be no more than ${max} characters`;
 29 |   }
 30 |   return false;
 31 | };
 32 | 
 33 | export const integer = (value) => {
 34 |   if (!isEmpty(value) && !Number.isInteger(Number(value))) {
 35 |     return 'Must be an integer';
 36 |   }
 37 |   return false;
 38 | };
 39 | 
 40 | export const oneOf = enumeration => (value) => {
 41 |   if (!enumeration.includes(value)) {
 42 |     return `Must be one of: ${enumeration.join(', ')}`;
 43 |   }
 44 |   return false;
 45 | };
 46 | 
 47 | export const noMatch = (field, msg) => (value, data) => {
 48 |   if (data) {
 49 |     if (value === data[field]) {
 50 |       return msg;
 51 |     }
 52 |   }
 53 |   return false;
 54 | };
 55 | 
 56 | export const match = (field, msg) => (value, data) => {
 57 |   if (data) {
 58 |     if (value !== data[field]) {
 59 |       return msg;
 60 |     }
 61 |   }
 62 |   return false;
 63 | };
 64 | 
 65 | export const passwordPattern = (value) => {
 66 |   // Let's not start a debate on email regex. This is just for an example app!
 67 |   if (!isEmpty(value) && !/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/i.test(value)) {
 68 |     return 'Invalid password pattern';
 69 |   }
 70 |   return false;
 71 | };
 72 | 
 73 | export const createValidator = (rules, params) => (data = {}) => {
 74 |   const errors = {};
 75 |   Object.keys(rules).forEach((key) => {
 76 |     const rule = join([].concat(rules[key])); // concat enables both functions and arrays of functions
 77 |     const error = rule(data[key], data, { key, ...params });
 78 |     if (error) {
 79 |       errors[key] = error;
 80 |     }
 81 |   });
 82 |   return errors;
 83 | };
 84 | 
 85 | export const passwordFormat = (value) => {
 86 |   const reg = new RegExp('^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$');
 87 |   if (!reg.test(value)) {
 88 |     return 'Invalid password';
 89 |   }
 90 |   return false;
 91 | };
 92 | 
 93 | export const phoneFormat = (value) => {
 94 |   const reg = new RegExp('([0-9\\s\\-]{7,})(?:\\s*(?:#|x\\.?|ext\\.?|extension)\\s*(\\d+))?$');
 95 |   if (!reg.test(value)) {
 96 |     return 'Invalid phone number format';
 97 |   }
 98 |   return false;
 99 | };
100 | 


--------------------------------------------------------------------------------
/src/reducer.js:
--------------------------------------------------------------------------------
 1 | import { routerReducer } from 'react-router-redux';
 2 | import { combineReducers } from 'redux';
 3 | import { reducer as form } from 'redux-form';
 4 | 
 5 | // IMPORT_STORES
 6 | import { loadingReducer } from 'feature/Loading';
 7 | import { authReducer } from 'feature/Login';
 8 | import { kycReducer } from 'feature/Kyc';
 9 | 
10 | const allReducers = {
11 |   // CONNECT_STORES
12 |   auth: authReducer,
13 |   kyc: kycReducer,
14 |   form,
15 |   loadingModal: loadingReducer,
16 | };
17 | 
18 | export default combineReducers({
19 |   ...allReducers,
20 |   router: routerReducer,
21 | });
22 | 


--------------------------------------------------------------------------------
/src/scss/components/_component.activities.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START ACTIVITIES COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-activities {
 7 |     background-image: url(/assets/images/bg-main.png);
 8 |     background-position: center;
 9 |     background-size: cover;
10 |     background-repeat: no-repeat;
11 |     min-height: 100vh;
12 | }
13 | 
14 | .c-activities__container  {
15 |     width: 100%;
16 |     max-width: 460px;
17 |     position: absolute;
18 |     top: 50%;
19 |     left: 50%;
20 |     transform: translate(-50%, -50%);
21 |     -webkit-transform: translate(-50%, -50%);
22 |     -ms-transform: translate(-50%, -50%);
23 |     opacity: 1;
24 |     padding: 60px 50px 40px 50px;
25 |     background: #fff;
26 |     border-radius: 10px;
27 |     z-index: 5;
28 | }
29 | 
30 | .c-activities__options {
31 |     display: flex;
32 |     align-items: center;
33 |     justify-content: space-between;
34 | 
35 |     &--center {
36 |         justify-content: center;
37 |     }
38 | }
39 | 
40 | .c-activities__heading {
41 |     line-height: 46px;
42 |     font-size: 27px;
43 |     font-weight: 700;
44 |     letter-spacing: 2px;
45 |     color: #ED2553;
46 | }
47 | 
48 | .c-activities__button {
49 |     margin: 25px 0;
50 | 
51 |     svg {
52 |         margin-right: 10px;
53 |     }
54 | }
55 | 
56 | /* ==========================================================================
57 |    # END ACTIVITIES COMPONENT
58 |    ========================================================================== 
59 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.button.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START BUTTON COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-button {
 7 |     margin: 10px 0 0 0;
 8 | 
 9 |     &+&{
10 |         margin-left: 15px;
11 |     }
12 | }
13 | 
14 | 
15 | .c-button__eyes {
16 |     outline: 0 !important;
17 |     border: 0;
18 |     background-color: transparent;
19 |     position: absolute;
20 |     right: 0;
21 |     top: 24px;
22 |     cursor: pointer;
23 | 
24 |     i {
25 |         font-size: 20px;
26 |     }
27 | }
28 | 
29 | /* ==========================================================================
30 |    # END BUTTON COMPONENT
31 |    ========================================================================== 
32 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.card.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START CARD COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-card {
 7 |     color: rgba(0, 0, 0, 0.87);
 8 |     width: 100%;
 9 |     border: 0;
10 |     position: relative;
11 |     min-width: 0;
12 |     word-wrap: break-word;
13 |     font-size: 16px;
14 |     margin-top: 30px;
15 |     background: #fff;
16 |     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
17 |     margin-bottom: 30px;
18 |     border-radius: 6px;
19 |     display: flex;
20 |     flex-direction: column;
21 | }
22 | 
23 | .c-card__header {
24 |     background: linear-gradient(60deg, $global-color-branch, $global-color-branch);
25 |     box-shadow: 0 12px 20px -10px rgba(156, 39, 176, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2);
26 |     padding: 30px 15px;
27 |     border-radius: 3px;
28 |     color: #FFFFFF;
29 |     margin: -20px 15px 0;
30 |     position: relative;
31 |     border-bottom: none;
32 | }
33 | 
34 | .c-card__body {
35 |     padding: 50px 20px;
36 |     position: relative;
37 | }
38 | 
39 | /* ==========================================================================
40 |    # END CARD COMPONENT
41 |    ========================================================================== 
42 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.form.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START FORM COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-form__row {
 7 |     position: relative;
 8 |     width: 100%;
 9 | }
10 | 
11 | /* ==========================================================================
12 |    # END FORM COMPONENT
13 |    ========================================================================== 
14 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.header.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START HEADER COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-header {
 7 |   margin-left: auto;
 8 |   margin-right: auto;
 9 |   display: flex;
10 |   align-items: center;
11 |   justify-content: space-between;
12 | }
13 | 
14 | .c-header__title {
15 |   color: #5c5c5f;
16 |   font-size: 24px;
17 |   font-weight: 300;
18 |   line-height: 30px;
19 |   border-radius: 3px;
20 |   text-transform: none;
21 | }
22 | 
23 | .c-header__button {
24 |   width: 41px !important;
25 |   min-width: 41px !important;
26 |   height: 41px !important;
27 |   font-size: 20px;
28 |   margin: 0 !important;
29 |   padding: 0 !important;
30 | 
31 |   svg {
32 |     width: 20px;
33 |     height: 20px;
34 |     color: #5c5c5f;
35 |   }
36 | }
37 | 
38 | /* ==========================================================================
39 |    # END HEADER COMPONENT
40 |    ========================================================================== 
41 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.heading.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START HEADING
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-heading {
 7 |    color: #fff;
 8 |    margin: 0; 
 9 | }
10 | 
11 | .c-heading__h4 {
12 |     font-size: 1.4em;
13 |     min-height: auto;
14 |     font-weight: 300;
15 |     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
16 |     margin-bottom: 3px;
17 |     text-decoration: none;
18 | }
19 | 
20 | 
21 | 
22 | /* ==========================================================================
23 |    # END HEADING
24 |    ========================================================================== 
25 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.loading.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START LOADING COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-loading {
 7 |   position: fixed;
 8 |   top: 0;
 9 |   left: 0;
10 |   right: 0;
11 |   bottom: 0;
12 |   z-index: 99;
13 | 
14 |   &::before {
15 |     content: '';
16 |     position: absolute;
17 |     z-index: 2;
18 |     top: 0;
19 |     left: 0;
20 |     right: 0;
21 |     bottom: 0;
22 |     background-color: #000;
23 |     opacity: .5;
24 |   }
25 | }
26 | 
27 | .c-loading__center {
28 |   position: absolute;
29 |   top: 50%;
30 |   left: 50%;
31 |   right: 0;
32 |   bottom: 0;
33 |   z-index: 4;
34 |   margin: -20px 0 -20px 0;
35 | }
36 | 
37 | /* ==========================================================================
38 |    # END LOADING COMPONENT
39 |    ========================================================================== 
40 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.modal.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START MODAL COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-modal {
 7 |     background: rgba(0, 0, 0, 0.5);
 8 |     display: flex;
 9 |     align-items: flex-start;
10 |     position: fixed;
11 |     top: 0;
12 |     left: 0;
13 |     right: 0;
14 |     bottom: 0;
15 |     overflow-y: auto;
16 |     overflow-x: hidden;
17 |     z-index: 1000;
18 |     padding: 1.2rem;
19 |     display: none;
20 | 
21 |     &--visible {
22 |         display: block;
23 |     }
24 | }
25 | 
26 | .c-modal__content {
27 |     max-width: 750px;
28 |     position: relative;
29 |     padding: 1.2rem;
30 |     background: #ffffff;
31 |     background-clip: padding-box;
32 |     box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
33 |     margin: 50px auto 0;
34 | 
35 |     b {
36 |         margin: 0 5px;
37 |     }
38 | }
39 | 
40 | .c-modal__svg {
41 |     text-align: center;
42 | 
43 |     svg{
44 |         font-size: 80px;
45 |     }
46 | 
47 |     &--success {
48 |         svg {
49 |             color: $global-color-success;
50 |         }
51 |     }
52 | 
53 |     &--error {
54 |         svg {
55 |             color: $global-color-error;
56 |         }
57 |     }
58 | }
59 | 
60 | 
61 | .c-modal__middle {
62 |     margin: 30px 0;
63 | }
64 | 
65 | .c-modal__footer {
66 |     padding-top: 20px;
67 |     border-top : 1px solid rgba(0,0,0,.2);
68 | 
69 |     &--right {
70 |         text-align: right;
71 |     }
72 | }
73 | 
74 | .c-modal__align--center {
75 |     text-align: center;
76 | }
77 | 
78 | .c-modal__lead {
79 |     font-size: 24px;
80 |     font-weight: bold;
81 |     margin: 20px;
82 |     letter-spacing: 1px;
83 | 
84 |     &--success {
85 |         color: $global-color-success;
86 |     }
87 | 
88 |     &--error {
89 |         color: $global-color-error;
90 |     }
91 | }
92 | 
93 | 
94 | /* ==========================================================================
95 |    # END MODAL COMPONENT
96 |    ========================================================================== 
97 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.panel.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START PANEL COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-panel {
 7 |     width: calc(100% - 240px);
 8 |     position: relative;
 9 |     transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
10 |     max-height: 100%;
11 |     padding: 15px 30px;
12 |     margin-left: auto;
13 | }
14 | 
15 | .c-panel__content {
16 |     padding: 20px 0 70px 0;
17 | }
18 | 
19 | @media (max-width: 576px) {
20 |     .c-panel {
21 |         width: 100%;
22 |     }
23 | }
24 | 
25 | /* ==========================================================================
26 |    # END PANEL COMPONENT
27 |    ========================================================================== 
28 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.row.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START ROW COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-row {
 7 |     display: -ms-flexbox;
 8 |     display: flex;
 9 |     -ms-flex-wrap: wrap;
10 |     flex-wrap: wrap;
11 |     margin-right: -15px;
12 |     margin-left: -15px;
13 | 
14 |     &+& {
15 |         margin-top: 15px;
16 |     }
17 | }
18 | 
19 | .c-row__line {
20 |     border-top: 1px solid #dadada;
21 |     margin: 20px -15px;
22 | }
23 | 
24 | 
25 | @media (max-width: 576px) {
26 |     .c-row {
27 |         &>div {
28 |             margin-top: 10px;
29 |         }
30 |     }
31 | }
32 | 
33 | /* ==========================================================================
34 |    # END ROW COMPONENT
35 |    ========================================================================== 
36 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.sidebar.scss:
--------------------------------------------------------------------------------
  1 | /* ==========================================================================
  2 |    # START SIDEBAR COMPONENT
  3 |    ========================================================================== 
  4 | */
  5 | 
  6 | .c-sidebar {
  7 |     top: 0;
  8 |     left: 0;
  9 |     width: 240px;
 10 |     border: none;
 11 |     bottom: 0;
 12 |     z-index: 5;
 13 |     position: fixed;
 14 |     transition: all .3s linear;
 15 |     box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
 16 |     color: #fff;
 17 | }
 18 | 
 19 | .c-sidebar__top {
 20 |     padding: 15px 15px;
 21 |     z-index: 4;
 22 |     position: relative;
 23 | 
 24 |     &::after {
 25 |         content: "";
 26 |         right: 15px;
 27 |         width: calc(100% - 30px);
 28 |         bottom: 0;
 29 |         height: 1px;
 30 |         position: absolute;
 31 |         background-color: rgba(180, 180, 180, 0.3);
 32 |     }
 33 | }
 34 | 
 35 | .c-sidebar__img {
 36 |     top: 22px;
 37 |     width: 35px;
 38 |     border: 0;
 39 |     position: absolute;
 40 |     vertical-align: middle;
 41 | }
 42 | 
 43 | .c-sidebar__logo {
 44 |     width: 30px;
 45 |     display: inline-block;
 46 |     max-height: 30px;
 47 |     margin-left: 10px;
 48 |     margin-right: 15px;
 49 | }
 50 | 
 51 | .c-sidebar__logoLink {
 52 |     color: #fff;
 53 |     padding: 5px 0;
 54 |     display: block;
 55 |     font-size: 18px;
 56 |     text-align: center;
 57 |     font-weight: 400;
 58 |     line-height: 30px;
 59 |     text-transform: uppercase;
 60 |     text-decoration: none;
 61 |     background-color: transparent;
 62 | }
 63 | 
 64 | .c-sidebar__bg {
 65 |     top: 0;
 66 |     left: 0;
 67 |     width: 100%; 
 68 |     height: 100%;
 69 |     z-index: 1;
 70 |     display: block;
 71 |     position: absolute;
 72 |     background: url(/assets/images/bg-sidebar.jpg) center center;
 73 |     background-size: cover;
 74 | 
 75 |     &::after {
 76 |         content: '';
 77 |         width: 100%;
 78 |         height: 100%;
 79 |         z-index: 3;
 80 |         display: block;
 81 |         opacity: .8;
 82 |         position: absolute;
 83 |         background: #000;
 84 |     }
 85 | }
 86 | 
 87 | .c-sidebar__nav {
 88 |     height: calc(100vh - 75px);
 89 |     z-index: 4;
 90 |     position: relative;
 91 |     overflow: auto;
 92 | }
 93 | 
 94 | .c-sidebar__text {
 95 |     font-weight: 300;
 96 | }
 97 | 
 98 | .c-sidebar__icon {
 99 |     color: #fff !important;
100 | }
101 | 
102 | .c-sidebar__link {
103 |     display: flex;
104 |     align-items: center;
105 |     position: relative;
106 |     text-decoration: none;
107 |     color: #fff;
108 | 
109 |     &:hover, &:focus, &:visited {
110 |         text-decoration: none;
111 |         color: #fff;
112 |     }
113 | 
114 |     &.active {
115 |         .c-sidebar__button {
116 |             background-color: $global-color-primary !important;
117 |         }
118 |     }
119 | }
120 | 
121 | .c-sidebar__button{
122 |     margin: 10px 5px 0 !important;
123 |     padding: 10px 15px !important;
124 |     transition: all .5s linear !important;
125 |     font-weight: 300;
126 |     line-height: 1.5em;
127 |     border-radius: 3px !important;
128 |     background-color: transparent !important;
129 | }
130 | 
131 | .c-sidebar__expand {
132 |     padding: 0 5px;
133 | 
134 |     &--right {
135 |         padding-left: 15px;
136 |     }
137 | }
138 | 
139 | .c-sidebar__icon {
140 |     margin-right: 5px !important;
141 | }
142 | 
143 | @media (max-width: 576px) {
144 |     .c-sidebar {
145 |         transform: translateX(-100%);
146 |     }
147 | }
148 | 
149 | 
150 | /* ==========================================================================
151 |    # END SIDEBAR COMPONENT
152 |    ========================================================================== 
153 | */


--------------------------------------------------------------------------------
/src/scss/components/_component.text.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START TEXT COMPONENT
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .c-text {
 7 |     &--error {
 8 |         color: #f00;    
 9 |         margin: 10px 0;
10 |     }
11 | }
12 | 
13 | .c-text__status {
14 |     font-weight: 500;
15 |     
16 |     &.is-NEW {
17 |         color: $global-color-text-new; 
18 |     }
19 | 
20 |     &.is-APPROVED {
21 |         color: $global-color-text-approved;
22 |     }
23 | 
24 |     &.is-REJECTED {
25 |         color: $global-color-text-rejected;
26 |     }
27 | 
28 |     &.is-PENDING {
29 |         color: $global-color-text-pending;
30 |     }
31 | }
32 | 
33 | /* ==========================================================================
34 |    # END TEXT COMPONENT
35 |    ========================================================================== 
36 | */


--------------------------------------------------------------------------------
/src/scss/elements/_element.link.scss:
--------------------------------------------------------------------------------
1 | a {
2 |   margin: 0 5px;
3 | }


--------------------------------------------------------------------------------
/src/scss/elements/_element.page.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |   outline:  0;
 3 |   margin: 0;
 4 |   padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |     color: $global-color-text-branch;
 9 |     font-size: 16px;
10 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
11 |         "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
12 |         sans-serif;
13 |     -webkit-font-smoothing: antialiased;
14 |     -moz-osx-font-smoothing: grayscale;
15 |     word-break: break-word;
16 | }
17 | 
18 | form {
19 |     width: 100%;
20 | }


--------------------------------------------------------------------------------
/src/scss/generics/_generic.box-sizing.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START BOX SIZING
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | html {
 7 |   -webkit-box-sizing: border-box;
 8 |      -moz-box-sizing: border-box;
 9 |           box-sizing: border-box;
10 | }
11 | 
12 | * {
13 |   &,
14 |   &:before,
15 |   &:after {
16 |       -webkit-box-sizing: inherit;
17 |          -moz-box-sizing: inherit;
18 |               box-sizing: inherit;
19 |       }
20 | }
21 | 
22 | /* ==========================================================================
23 |    # END BOX SIZING
24 |    ========================================================================== 
25 | */


--------------------------------------------------------------------------------
/src/scss/generics/_generic.normalize.scss:
--------------------------------------------------------------------------------
  1 | /* ==========================================================================
  2 |    #NORMALIZE
  3 |    ========================================================================== 
  4 | */
  5 | 
  6 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  7 | 
  8 | /* Document
  9 |    ========================================================================== */
 10 | 
 11 | /**
 12 |  * 1. Correct the line height in all browsers.
 13 |  * 2. Prevent adjustments of font size after orientation changes in
 14 |  *    IE on Windows Phone and in iOS.
 15 |  */
 16 | 
 17 |  html {
 18 |   line-height: 1.15; /* 1 */
 19 |   -ms-text-size-adjust: 100%; /* 2 */
 20 |   -webkit-text-size-adjust: 100%; /* 2 */
 21 | }
 22 | 
 23 | /* Sections
 24 |  ========================================================================== */
 25 | 
 26 | /**
 27 | * Remove the margin in all browsers (opinionated).
 28 | */
 29 | 
 30 | body {
 31 |   margin: 0;
 32 | }
 33 | 
 34 | /**
 35 | * Add the correct display in IE 9-.
 36 | */
 37 | 
 38 | article,
 39 | aside,
 40 | footer,
 41 | header,
 42 | nav,
 43 | section {
 44 |   display: block;
 45 | }
 46 | 
 47 | /**
 48 | * Correct the font size and margin on `h1` elements within `section` and
 49 | * `article` contexts in Chrome, Firefox, and Safari.
 50 | */
 51 | 
 52 | h1 {
 53 |   font-size: 2em;
 54 |   margin: 0.67em 0;
 55 | }
 56 | 
 57 | /* Grouping content
 58 |  ========================================================================== */
 59 | 
 60 | /**
 61 | * Add the correct display in IE 9-.
 62 | * 1. Add the correct display in IE.
 63 | */
 64 | 
 65 | figcaption,
 66 | figure,
 67 | main { /* 1 */
 68 |   display: block;
 69 | }
 70 | 
 71 | /**
 72 | * Add the correct margin in IE 8.
 73 | */
 74 | 
 75 | figure {
 76 |   margin: 1em 40px;
 77 | }
 78 | 
 79 | /**
 80 | * 1. Add the correct box sizing in Firefox.
 81 | * 2. Show the overflow in Edge and IE.
 82 | */
 83 | 
 84 | hr {
 85 |   box-sizing: content-box; /* 1 */
 86 |   height: 0; /* 1 */
 87 |   overflow: visible; /* 2 */
 88 | }
 89 | 
 90 | /**
 91 | * 1. Correct the inheritance and scaling of font size in all browsers.
 92 | * 2. Correct the odd `em` font sizing in all browsers.
 93 | */
 94 | 
 95 | pre {
 96 |   font-family: monospace, monospace; /* 1 */
 97 |   font-size: 1em; /* 2 */
 98 | }
 99 | 
100 | /* Text-level semantics
101 |  ========================================================================== */
102 | 
103 | /**
104 | * 1. Remove the gray background on active links in IE 10.
105 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
106 | */
107 | 
108 | a {
109 |   background-color: transparent; /* 1 */
110 |   -webkit-text-decoration-skip: objects; /* 2 */
111 | }
112 | 
113 | /**
114 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
115 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
116 | */
117 | 
118 | abbr[title] {
119 |   border-bottom: none; /* 1 */
120 |   text-decoration: underline; /* 2 */
121 |   text-decoration: underline dotted; /* 2 */
122 | }
123 | 
124 | /**
125 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
126 | */
127 | 
128 | b,
129 | strong {
130 |   font-weight: inherit;
131 | }
132 | 
133 | /**
134 | * Add the correct font weight in Chrome, Edge, and Safari.
135 | */
136 | 
137 | b,
138 | strong {
139 |   font-weight: bolder;
140 | }
141 | 
142 | /**
143 | * 1. Correct the inheritance and scaling of font size in all browsers.
144 | * 2. Correct the odd `em` font sizing in all browsers.
145 | */
146 | 
147 | code,
148 | kbd,
149 | samp {
150 |   font-family: monospace, monospace; /* 1 */
151 |   font-size: 1em; /* 2 */
152 | }
153 | 
154 | /**
155 | * Add the correct font style in Android 4.3-.
156 | */
157 | 
158 | dfn {
159 |   font-style: italic;
160 | }
161 | 
162 | /**
163 | * Add the correct background and color in IE 9-.
164 | */
165 | 
166 | mark {
167 |   background-color: #ff0;
168 |   color: #000;
169 | }
170 | 
171 | /**
172 | * Add the correct font size in all browsers.
173 | */
174 | 
175 | small {
176 |   font-size: 80%;
177 | }
178 | 
179 | /**
180 | * Prevent `sub` and `sup` elements from affecting the line height in
181 | * all browsers.
182 | */
183 | 
184 | sub,
185 | sup {
186 |   font-size: 75%;
187 |   line-height: 0;
188 |   position: relative;
189 |   vertical-align: baseline;
190 | }
191 | 
192 | sub {
193 |   bottom: -0.25em;
194 | }
195 | 
196 | sup {
197 |   top: -0.5em;
198 | }
199 | 
200 | /* Embedded content
201 |  ========================================================================== */
202 | 
203 | /**
204 | * Add the correct display in IE 9-.
205 | */
206 | 
207 | audio,
208 | video {
209 |   display: inline-block;
210 | }
211 | 
212 | /**
213 | * Add the correct display in iOS 4-7.
214 | */
215 | 
216 | audio:not([controls]) {
217 |   display: none;
218 |   height: 0;
219 | }
220 | 
221 | /**
222 | * Remove the border on images inside links in IE 10-.
223 | */
224 | 
225 | img {
226 |   border-style: none;
227 | }
228 | 
229 | /**
230 | * Hide the overflow in IE.
231 | */
232 | 
233 | svg:not(:root) {
234 |   overflow: hidden;
235 | }
236 | 
237 | /* Forms
238 |  ========================================================================== */
239 | 
240 | /**
241 | * 1. Change the font styles in all browsers (opinionated).
242 | * 2. Remove the margin in Firefox and Safari.
243 | */
244 | 
245 | button,
246 | input,
247 | optgroup,
248 | select,
249 | textarea {
250 |   font-family: sans-serif; /* 1 */
251 |   font-size: 100%; /* 1 */
252 |   line-height: 1.15; /* 1 */
253 |   margin: 0; /* 2 */
254 | }
255 | 
256 | /**
257 | * Show the overflow in IE.
258 | * 1. Show the overflow in Edge.
259 | */
260 | 
261 | button,
262 | input { /* 1 */
263 |   overflow: visible;
264 | }
265 | 
266 | /**
267 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
268 | * 1. Remove the inheritance of text transform in Firefox.
269 | */
270 | 
271 | button,
272 | select { /* 1 */
273 |   text-transform: none;
274 | }
275 | 
276 | /**
277 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
278 | *    controls in Android 4.
279 | * 2. Correct the inability to style clickable types in iOS and Safari.
280 | */
281 | 
282 | button,
283 | html [type="button"], /* 1 */
284 | [type="reset"],
285 | [type="submit"] {
286 |   -webkit-appearance: button; /* 2 */
287 | }
288 | 
289 | /**
290 | * Remove the inner border and padding in Firefox.
291 | */
292 | 
293 | button::-moz-focus-inner,
294 | [type="button"]::-moz-focus-inner,
295 | [type="reset"]::-moz-focus-inner,
296 | [type="submit"]::-moz-focus-inner {
297 |   border-style: none;
298 |   padding: 0;
299 | }
300 | 
301 | /**
302 | * Restore the focus styles unset by the previous rule.
303 | */
304 | 
305 | button:-moz-focusring,
306 | [type="button"]:-moz-focusring,
307 | [type="reset"]:-moz-focusring,
308 | [type="submit"]:-moz-focusring {
309 |   outline: 1px dotted ButtonText;
310 | }
311 | 
312 | /**
313 | * Correct the padding in Firefox.
314 | */
315 | 
316 | fieldset {
317 |   padding: 0.35em 0.75em 0.625em;
318 | }
319 | 
320 | /**
321 | * 1. Correct the text wrapping in Edge and IE.
322 | * 2. Correct the color inheritance from `fieldset` elements in IE.
323 | * 3. Remove the padding so developers are not caught out when they zero out
324 | *    `fieldset` elements in all browsers.
325 | */
326 | 
327 | legend {
328 |   box-sizing: border-box; /* 1 */
329 |   color: inherit; /* 2 */
330 |   display: table; /* 1 */
331 |   max-width: 100%; /* 1 */
332 |   padding: 0; /* 3 */
333 |   white-space: normal; /* 1 */
334 | }
335 | 
336 | /**
337 | * 1. Add the correct display in IE 9-.
338 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
339 | */
340 | 
341 | progress {
342 |   display: inline-block; /* 1 */
343 |   vertical-align: baseline; /* 2 */
344 | }
345 | 
346 | /**
347 | * Remove the default vertical scrollbar in IE.
348 | */
349 | 
350 | textarea {
351 |   overflow: auto;
352 | }
353 | 
354 | /**
355 | * 1. Add the correct box sizing in IE 10-.
356 | * 2. Remove the padding in IE 10-.
357 | */
358 | 
359 | [type="checkbox"],
360 | [type="radio"] {
361 |   box-sizing: border-box; /* 1 */
362 |   padding: 0; /* 2 */
363 | }
364 | 
365 | /**
366 | * Correct the cursor style of increment and decrement buttons in Chrome.
367 | */
368 | 
369 | [type="number"]::-webkit-inner-spin-button,
370 | [type="number"]::-webkit-outer-spin-button {
371 |   height: auto;
372 | }
373 | 
374 | /**
375 | * 1. Correct the odd appearance in Chrome and Safari.
376 | * 2. Correct the outline style in Safari.
377 | */
378 | 
379 | [type="search"] {
380 |   -webkit-appearance: textfield; /* 1 */
381 |   outline-offset: -2px; /* 2 */
382 | }
383 | 
384 | /**
385 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
386 | */
387 | 
388 | [type="search"]::-webkit-search-cancel-button,
389 | [type="search"]::-webkit-search-decoration {
390 |   -webkit-appearance: none;
391 | }
392 | 
393 | /**
394 | * 1. Correct the inability to style clickable types in iOS and Safari.
395 | * 2. Change font properties to `inherit` in Safari.
396 | */
397 | 
398 | ::-webkit-file-upload-button {
399 |   -webkit-appearance: button; /* 1 */
400 |   font: inherit; /* 2 */
401 | }
402 | 
403 | /* Interactive
404 |  ========================================================================== */
405 | 
406 | /*
407 | * Add the correct display in IE 9-.
408 | * 1. Add the correct display in Edge, IE, and Firefox.
409 | */
410 | 
411 | details, /* 1 */
412 | menu {
413 |   display: block;
414 | }
415 | 
416 | /*
417 | * Add the correct display in all browsers.
418 | */
419 | 
420 | summary {
421 |   display: list-item;
422 | }
423 | 
424 | /* Scripting
425 |  ========================================================================== */
426 | 
427 | /**
428 | * Add the correct display in IE 9-.
429 | */
430 | 
431 | canvas {
432 |   display: inline-block;
433 | }
434 | 
435 | /**
436 | * Add the correct display in IE.
437 | */
438 | 
439 | template {
440 |   display: none;
441 | }
442 | 
443 | /* Hidden
444 |  ========================================================================== */
445 | 
446 | /**
447 | * Add the correct display in IE 10-.
448 | */
449 | 
450 | [hidden] {
451 |   display: none;
452 | }


--------------------------------------------------------------------------------
/src/scss/generics/_generic.reset.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    #RESET
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | /**
 7 |  * A very simple reset that sits on top of Normalize.css.
 8 |  */
 9 | 
10 |  body,
11 |  h1, h2, h3, h4, h5, h6,
12 |  blockquote, p, pre,
13 |  dl, dd, ol, ul,
14 |  figure,
15 |  hr,
16 |  fieldset, legend {
17 |      margin:  0;
18 |      padding: 0;
19 |  }
20 |  
21 |  
22 |  /**
23 |   * Remove trailing margins from nested lists.
24 |   */
25 |  
26 |  li > {
27 |  
28 |      ol,
29 |      ul {
30 |          margin-bottom: 0;
31 |      }
32 |  
33 |  }
34 |  
35 |  
36 |  /**
37 |   * Remove default table spacing.
38 |   */
39 |  
40 |  table {
41 |      border-collapse: collapse;
42 |      border-spacing: 0;
43 |  }
44 |  
45 |  
46 |  /**
47 |   * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
48 |   *    on fieldsets.
49 |   */
50 |  
51 |  fieldset {
52 |      min-width: 0; /* [1] */
53 |      border: 0;
54 |  }


--------------------------------------------------------------------------------
/src/scss/index.scss:
--------------------------------------------------------------------------------
 1 | // SETTINGS
 2 | @import "settings/settings.core";
 3 | 
 4 | // TOOLS
 5 | @import "tools/_tools.font-family";
 6 | // GENERICS
 7 | @import "generics/_generic.normalize";
 8 | @import "generics/_generic.box-sizing";
 9 | @import "generics/_generic.reset";
10 | 
11 | // ELEMENTS
12 | @import "elements/_element.page";
13 | @import "elements/_element.link";
14 | 
15 | // OBJECTS
16 | @import "objects/_objects.container";
17 | 
18 | // COMPONENTS
19 | @import "components/_component.loading";
20 | @import "components/_component.header";
21 | @import "components/_component.heading";
22 | @import "components/_component.sidebar";
23 | @import "components/_component.panel";
24 | @import "components/_component.card";
25 | @import "components/_component.button";
26 | @import "components/_component.modal";
27 | @import "components/_component.form";
28 | @import "components/_component.text";
29 | @import "components/_component.row";
30 | @import "components/_component.activities";
31 | 
32 | // UTILITIES
33 | @import "utilities/_utilities.margin";
34 | @import "utilities/_utilities.hidden";
35 | 


--------------------------------------------------------------------------------
/src/scss/objects/_objects.container.scss:
--------------------------------------------------------------------------------
1 | .o-container {
2 |   margin: 0 auto;
3 | 
4 |   &--middle {
5 |     max-width: 800px;
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/scss/settings/_settings.core.scss:
--------------------------------------------------------------------------------
 1 | // COLORS 
 2 | $global-color-branch: #ab47bc;
 3 | $global-color-primary: #3f51b5;
 4 | $global-color-success: #00ff00;
 5 | $global-color-error: #f00;
 6 | 
 7 | // COLORS TEXT
 8 | $global-color-text-branch: #565454;
 9 | 
10 | // COLORS TEXT STATUS
11 | $global-color-text-new: #ffbf00;
12 | $global-color-text-approved: #1e7e34;
13 | $global-color-text-rejected: #ed2553;
14 | $global-color-text-pending: #ff7400;


--------------------------------------------------------------------------------
/src/scss/tools/_tools.font-family.scss:
--------------------------------------------------------------------------------
 1 | // @font-face {
 2 | //     font-family: 'DancingScriptRegular';
 3 | //     src: url('../fonts/DancingScriptRegular.eot');
 4 | //     src: url('../fonts/DancingScriptRegular.eot') format('embedded-opentype'),
 5 | //          url('../fonts/DancingScriptRegular.woff2') format('woff2'),
 6 | //          url('../fonts/DancingScriptRegular.woff') format('woff'),
 7 | //          url('../fonts/DancingScriptRegular.ttf') format('truetype'),
 8 | //          url('../fonts/DancingScriptRegular.svg#DancingScriptRegular') format('svg');
 9 | // }
10 | 
11 | @mixin font-family($locale){
12 |     @if ($locale == 'Roboto') {
13 |         font-family: "Roboto", "Helvetica", "Arial", sans-serif;
14 |     }@else if ($locale == 'Playfair') {
15 |         font-family: "Playfair Display", sans-serif;
16 |         font-weight: bold;
17 |     }
18 | }


--------------------------------------------------------------------------------
/src/scss/utilities/_utilities.hidden.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START HIDDEN UTILITIES
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .u-hidden {
 7 |     display: none !important;
 8 | }
 9 | 
10 | /* ==========================================================================
11 |    # END HIDDEN UTILITIES
12 |    ========================================================================== 
13 | */


--------------------------------------------------------------------------------
/src/scss/utilities/_utilities.margin.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    # START UTILITIES MARGIN
 3 |    ========================================================================== 
 4 | */
 5 | 
 6 | .u-margin__reset {
 7 |     &--top {
 8 |         margin-top: 0 !important;
 9 |     }
10 | }
11 | 
12 | /* ==========================================================================
13 |    # END UTILITIES MARGIN
14 |    ========================================================================== 
15 | */


--------------------------------------------------------------------------------
/src/service/index.js:
--------------------------------------------------------------------------------
1 | import kycHttp from './kycHttp';
2 | import urlApi from './urlApi';
3 | 
4 | export {
5 |   kycHttp,
6 |   urlApi,
7 | };
8 | 


--------------------------------------------------------------------------------
/src/service/kycHttp.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | const { KYC_API } = process.env;
 4 | 
 5 | export default {
 6 |   token: undefined,
 7 | 
 8 |   headers: {},
 9 | 
10 |   setJwtToken(token) {
11 |     this.token = token;
12 |     this.establishHeaderRequest();
13 |   },
14 | 
15 |   establishHeaderRequest() {
16 |     this.headers = {
17 |       'content-type': 'application/json',
18 |       'x-kyc-auth': `Bearer ${this.token}`,
19 |     };
20 |   },
21 | 
22 |   get({ path = '', params = {} }) {
23 |     // if (!this.token) {
24 |     //   throw new Error('The API require token !!!');
25 |     // }
26 | 
27 |     axios.defaults.baseURL = KYC_API;
28 |     axios.defaults.withCredentials = true;
29 |     return axios.get(path, { headers: this.headers, params });
30 |   },
31 | 
32 |   put({ path = '', payload }) {
33 |     return axios({
34 |       baseURL: KYC_API,
35 |       data: payload,
36 |       method: 'PUT',
37 |       url: path,
38 |       headers: this.headers,
39 |     });
40 |   },
41 | 
42 |   post({ path = '', payload }) {
43 |     return axios({
44 |       withCredentials: true,
45 |       baseURL: KYC_API,
46 |       data: payload,
47 |       method: 'POST',
48 |       url: path,
49 |       headers: this.headers,
50 |     });
51 |   },
52 | };
53 | 


--------------------------------------------------------------------------------
/src/service/urlApi.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   customer: {
 3 |     login: 'login',
 4 |     register: 'register',
 5 |     getInfo: 'information',
 6 |     changePassword: 'changePassword',
 7 |     forgotPassword: 'forgotPassword',
 8 |     resetPassword: 'resetPassword',
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost'
 13 |     // [::1] is the IPv6 localhost address.
 14 |     || window.location.hostname === '[::1]'
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     || window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
 18 |     ),
 19 | );
 20 | 
 21 | function registerValidSW(swUrl, config) {
 22 |   navigator.serviceWorker
 23 |     .register(swUrl)
 24 |     .then((registration) => {
 25 |       registration.onupdatefound = () => {  // eslint-disable-line
 26 |         const installingWorker = registration.installing;
 27 |         installingWorker.onstatechange = () => {
 28 |           if (installingWorker.state === 'installed') {
 29 |             if (navigator.serviceWorker.controller) {
 30 |               // At this point, the old content will have been purged and
 31 |               // the fresh content will have been added to the cache.
 32 |               // It's the perfect time to display a "New content is
 33 |               // available; please refresh." message in your web app.
 34 |               console.log('New content is available; please refresh.');
 35 | 
 36 |               // Execute callback
 37 |               if (config.onUpdate) {
 38 |                 config.onUpdate(registration);
 39 |               }
 40 |             } else {
 41 |               // At this point, everything has been precached.
 42 |               // It's the perfect time to display a
 43 |               // "Content is cached for offline use." message.
 44 |               console.log('Content is cached for offline use.');
 45 | 
 46 |               // Execute callback
 47 |               if (config.onSuccess) {
 48 |                 config.onSuccess(registration);
 49 |               }
 50 |             }
 51 |           }
 52 |         };
 53 |       };
 54 |     })
 55 |     .catch((error) => {
 56 |       console.error('Error during service worker registration:', error);
 57 |     });
 58 | }
 59 | 
 60 | function checkValidServiceWorker(swUrl, config) {
 61 |   // Check if the service worker can be found. If it can't reload the page.
 62 |   fetch(swUrl)
 63 |     .then((response) => {
 64 |       // Ensure service worker exists, and that we really are getting a JS file.
 65 |       if (
 66 |         response.status === 404
 67 |         || response.headers.get('content-type').indexOf('javascript') === -1
 68 |       ) {
 69 |         // No service worker found. Probably a different app. Reload the page.
 70 |         navigator.serviceWorker.ready.then((registration) => {
 71 |           registration.unregister().then(() => {
 72 |             window.location.reload();
 73 |           });
 74 |         });
 75 |       } else {
 76 |         // Service worker found. Proceed as normal.
 77 |         registerValidSW(swUrl, config);
 78 |       }
 79 |     })
 80 |     .catch(() => {
 81 |       console.log(
 82 |         'No internet connection found. App is running in offline mode.',
 83 |       );
 84 |     });
 85 | }
 86 | 
 87 | export function register(config) {
 88 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 89 |     // The URL constructor is available in all browsers that support SW.
 90 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 91 |     if (publicUrl.origin !== window.location.origin) {
 92 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 93 |       // from what our page is served on. This might happen if a CDN is used to
 94 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 95 |       return;
 96 |     }
 97 | 
 98 |     window.addEventListener('load', () => {
 99 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
100 | 
101 |       if (isLocalhost) {
102 |         // This is running on localhost. Let's check if a service worker still exists or not.
103 |         checkValidServiceWorker(swUrl, config);
104 | 
105 |         // Add some additional logging to localhost, pointing developers to the
106 |         // service worker/PWA documentation.
107 |         navigator.serviceWorker.ready.then(() => {
108 |           console.log(
109 |             'This web app is being served cache-first by a service '
110 |               + 'worker. To learn more, visit https://goo.gl/SC7cgQ',
111 |           );
112 |         });
113 |       } else {
114 |         // Is not local host. Just register service worker
115 |         registerValidSW(swUrl, config);
116 |       }
117 |     });
118 |   }
119 | }
120 | 
121 | export function unregister() {
122 |   if ('serviceWorker' in navigator) {
123 |     navigator.serviceWorker.ready.then((registration) => {
124 |       registration.unregister();
125 |     });
126 |   }
127 | }
128 | 


--------------------------------------------------------------------------------