[feat] Initial code
This commit is contained in:
JasonWu
commit
7dc01d5480
|
|
@ -0,0 +1,5 @@
|
|||
/config
|
||||
/scripts
|
||||
/libs
|
||||
/src/services/Scripts/ElementWorkers/*
|
||||
/.eslintrc.js
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
module.exports = {
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: [
|
||||
'@typescript-eslint',
|
||||
'import',
|
||||
],
|
||||
extends: [
|
||||
'airbnb',
|
||||
'eslint-config-airbnb',
|
||||
],
|
||||
rules: {
|
||||
'indent': 'off',
|
||||
'max-len' : 'off',
|
||||
'semi': ['error'],
|
||||
'camelcase': 'off',
|
||||
'prefer-destructuring': 'off',
|
||||
'global-require': 'off',
|
||||
'prefer-template': 'off',
|
||||
'react/prop-types': 'off',
|
||||
'react/no-array-index-key': 'off',
|
||||
'react/jsx-fragments': 'off',
|
||||
'react/jsx-props-no-spreading': 'off',
|
||||
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.tsx', '.ts'] }],
|
||||
'jsx-a11y/control-has-associated-label': 'off',
|
||||
'import/named': 'off',
|
||||
'import/prefer-default-export': 'off',
|
||||
'import/no-extraneous-dependencies': 'off',
|
||||
'import/no-unresolved': [2, { ignore: ['\.png$'] }],
|
||||
'import/no-dynamic-require': 'off',
|
||||
'import/no-named-as-default': 'off',
|
||||
'no-use-before-define': 'off',
|
||||
'no-underscore-dangle': 'off',
|
||||
'no-useless-constructor': 'off',
|
||||
'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
|
||||
'no-param-reassign': 'off',
|
||||
'no-await-in-loop': 'off',
|
||||
'no-loop-func': 'off',
|
||||
'no-shadow': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-empty-interface': 'off',
|
||||
'@typescript-eslint/indent': ['error', 2],
|
||||
'@typescript-eslint/explicit-function-return-type': [1, { allowExpressions: true, allowTypedFunctionExpressions: true }],
|
||||
'@typescript-eslint/no-unused-vars': [2],
|
||||
// Additional
|
||||
'@typescript-eslint/triple-slash-reference': 'off',
|
||||
'@typescript-eslint/no-shadow': 'off',
|
||||
'@typescript-eslint/indent': 'off',
|
||||
'import/extensions': 'off',
|
||||
'import/no-unresolved': 'off',
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
},
|
||||
settings: {
|
||||
"import/resolver": {
|
||||
"alias": {
|
||||
"map": [
|
||||
["@Base", "./src/base"],
|
||||
["@Components", "./src/components"],
|
||||
["@Reducers", "./src/reducers"],
|
||||
["@API", "./src/api"],
|
||||
["@Tools", "./src/tools"],
|
||||
["@Hooks", "./src/hooks"],
|
||||
["@Models", "./src/models"],
|
||||
["@CSS", "./src/css"],
|
||||
["@Services", "./src/services"],
|
||||
["@Providers", "./src/providers"],
|
||||
["@Env", "./src/env"],
|
||||
["@Langs", "./src/langs"],
|
||||
["@Mocks", "./src/mocks"],
|
||||
["@Plugin", "./src/plugin"],
|
||||
],
|
||||
"extensions": [".js", ".jsx", '.ts', '.tsx', '.mjs', ".json"]
|
||||
},
|
||||
"node": {
|
||||
"extensions": [".js", ".jsx", ".ts", ".tsx"]
|
||||
}
|
||||
},
|
||||
"import/parsers": {
|
||||
'@typescript-eslint/parser': ['.ts', '.tsx', '.mjs'],
|
||||
},
|
||||
},
|
||||
env: {
|
||||
"browser": true,
|
||||
"jest": true,
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
# Sync Line break
|
||||
* text=auto
|
||||
|
||||
# Document Type
|
||||
*.markdown text
|
||||
*.md text
|
||||
*.mdwn text
|
||||
*.mdown text
|
||||
*.mkd text
|
||||
*.mkdn text
|
||||
*.mdtxt text
|
||||
*.mdtext text
|
||||
*.txt text
|
||||
AUTHORS text
|
||||
CHANGELOG text
|
||||
CHANGES text
|
||||
CONTRIBUTING text
|
||||
COPYING text
|
||||
copyright text
|
||||
*COPYRIGHT* text
|
||||
INSTALL text
|
||||
license text
|
||||
LICENSE text
|
||||
NEWS text
|
||||
readme text
|
||||
*README* text
|
||||
TODO text
|
||||
|
||||
# Microsoft Word Type
|
||||
*.doc diff=astextplain
|
||||
*.DOC diff=astextplain
|
||||
*.docx diff=astextplain
|
||||
*.DOCX diff=astextplain
|
||||
*.dot diff=astextplain
|
||||
*.DOT diff=astextplain
|
||||
*.pdf diff=astextplain
|
||||
*.PDF diff=astextplain
|
||||
*.rtf diff=astextplain
|
||||
*.RTF diff=astextplain
|
||||
|
||||
# Code Type
|
||||
*.bat text eol=lf
|
||||
*.coffee text
|
||||
*.css text eol=lf
|
||||
*.htm text
|
||||
*.html text eol=lf
|
||||
*.inc text
|
||||
*.ini text
|
||||
*.js text eol=lf
|
||||
*.json text eol=lf
|
||||
*.jsx text eol=lf
|
||||
*.less text
|
||||
*.od text
|
||||
*.onlydata text
|
||||
*.php text
|
||||
*.pl text
|
||||
*.py text
|
||||
*.rb text
|
||||
*.sass text
|
||||
*.scm text
|
||||
*.scss text
|
||||
*.sh text eol=lf
|
||||
*.sql text
|
||||
*.styl text
|
||||
*.tag text
|
||||
*.ts text
|
||||
*.tsx text
|
||||
*.xml text
|
||||
*.xhtml text
|
||||
*.cs text diff=csharp
|
||||
*.dockerignore text
|
||||
Dockerfile text
|
||||
|
||||
|
||||
# Template Type
|
||||
*.dot text
|
||||
*.ejs text
|
||||
*.haml text
|
||||
*.handlebars text
|
||||
*.hbs text
|
||||
*.hbt text
|
||||
*.jade text
|
||||
*.latte text
|
||||
*.mustache text
|
||||
*.njk text
|
||||
*.phtml text
|
||||
*.tmpl text
|
||||
*.tpl text
|
||||
*.twig text
|
||||
|
||||
# Visual Studio Setting
|
||||
*.sln text eol=lf
|
||||
*.csproj text eol=lf
|
||||
*.vbproj text eol=lf
|
||||
*.vcxproj text eol=lf
|
||||
*.vcproj text eol=lf
|
||||
*.dbproj text eol=lf
|
||||
*.fsproj text eol=lf
|
||||
*.lsproj text eol=lf
|
||||
*.wixproj text eol=lf
|
||||
*.modelproj text eol=lf
|
||||
*.sqlproj text eol=lf
|
||||
*.wmaproj text eol=lf
|
||||
*.xproj text eol=lf
|
||||
*.props text eol=lf
|
||||
*.filters text eol=lf
|
||||
*.vcxitems text eol=lf
|
||||
|
||||
# Linter
|
||||
.csslintrc text
|
||||
.eslintrc text
|
||||
.jscsrc text
|
||||
.jshintrc text
|
||||
.jshintignore text
|
||||
.stylelintrc text
|
||||
.stylecop text
|
||||
|
||||
# Setting
|
||||
*.bowerrc text
|
||||
*.cnf text
|
||||
*.conf text
|
||||
*.config text
|
||||
.browserslistrc text
|
||||
.editorconfig text
|
||||
.gitattributes text
|
||||
.gitconfig text
|
||||
.gitignore text
|
||||
.htaccess text
|
||||
*.npmignore text
|
||||
*.yaml text
|
||||
*.yml text
|
||||
browserslist text
|
||||
Makefile text
|
||||
makefile text
|
||||
*.ps1 text
|
||||
|
||||
## Binary
|
||||
|
||||
# Images
|
||||
*.ai binary
|
||||
*.bmp binary
|
||||
*.eps binary
|
||||
*.gif binary
|
||||
*.ico binary
|
||||
*.jng binary
|
||||
*.jp2 binary
|
||||
*.jpg binary
|
||||
*.jpeg binary
|
||||
*.jpx binary
|
||||
*.jxr binary
|
||||
*.pdf binary
|
||||
*.png binary
|
||||
*.psb binary
|
||||
*.psd binary
|
||||
*.svg binary
|
||||
*.svgz binary
|
||||
*.tif binary
|
||||
*.tiff binary
|
||||
*.wbmp binary
|
||||
*.webp binary
|
||||
|
||||
## Audio
|
||||
*.kar binary
|
||||
*.m4a binary
|
||||
*.mid binary
|
||||
*.midi binary
|
||||
*.mp3 binary
|
||||
*.ogg binary
|
||||
*.ra binary
|
||||
|
||||
## Video
|
||||
*.3gpp binary
|
||||
*.3gp binary
|
||||
*.as binary
|
||||
*.asf binary
|
||||
*.asx binary
|
||||
*.fla binary
|
||||
*.flv binary
|
||||
*.m4v binary
|
||||
*.mng binary
|
||||
*.mov binary
|
||||
*.mp4 binary
|
||||
*.mpeg binary
|
||||
*.mpg binary
|
||||
*.swc binary
|
||||
*.swf binary
|
||||
*.webm binary
|
||||
|
||||
## Zip
|
||||
*.7z binary
|
||||
*.gz binary
|
||||
*.rar binary
|
||||
*.tar binary
|
||||
*.zip binary
|
||||
|
||||
## FONTS
|
||||
*.ttf binary
|
||||
*.eot binary
|
||||
*.otf binary
|
||||
*.woff binary
|
||||
*.woff2 binary
|
||||
|
||||
## Exe
|
||||
*.exe binary
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
/.eslintcache
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Changelog
|
||||
|
||||
## 1.0.0
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# BUILD STAGE
|
||||
FROM node:14.14.0 as build
|
||||
LABEL maintainer="Jason <jason@>"
|
||||
WORKDIR /build
|
||||
|
||||
RUN npm install
|
||||
|
||||
COPY [".", "./"]
|
||||
ARG APP_ENV_ARG="dev"
|
||||
ENV APP_ENV ${APP_ENV_ARG}
|
||||
RUN npm run test:coverage && npm run build
|
||||
|
||||
# FINAL STAGE
|
||||
FROM nginx:alpine
|
||||
EXPOSE 8080
|
||||
|
||||
RUN apk add --no-cache ca-certificates
|
||||
RUN chmod a+rwx /var/cache/nginx /var/run /var/log/nginx
|
||||
RUN sed -i.bak 's/^user/#user/' /etc/nginx/nginx.conf
|
||||
COPY --from=build /build/build/ /usr/share/nginx/html/
|
||||
COPY ["./default.conf", "/etc/nginx/conf.d/default.conf"]
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
# keyCloak-Demo-Frontend
|
||||
|
||||
keyCloak Demo 用 Server
|
||||
|
||||
[](https://github.com/airbnb/javascript)
|
||||
|
||||
## 🔧 Requirements
|
||||
|
||||
- [Node.js](https://nodejs.org/en/) 10.13+ with [npm](https://www.npmjs.com/)
|
||||
- A fancy editor like [Vs Code](https://code.visualstudio.com/), [Sublime text](https://www.sublimetext.com/).
|
||||
|
||||
## 🚀 Project Quick Start
|
||||
|
||||
### Dev Server Guide
|
||||
|
||||
1. Clone the project from [keycloak-demo-frontend](https://git.trj.tw/keycloak-org/keycloak-demo-frontend.git).
|
||||
2. Move the root path in project folder.
|
||||
3. Run `npm i` or `npm install` to install node_modules.
|
||||
4. The default server is on `localhost:4200`, please check you don't have any server on it.
|
||||
5. Run `npm run start` to start dev server.
|
||||
|
||||
Steps
|
||||
|
||||
```git bash
|
||||
git clone https://git.trj.tw/keycloak-org/keycloak-demo-frontend.git
|
||||
cd keycloak-demo-frontend
|
||||
npm install && npm audit fix
|
||||
npm run start
|
||||
```
|
||||
|
||||
## 📢 Information
|
||||
|
||||
- **Front End Framework** : [React](https://github.com/facebook/react)
|
||||
- **CSS Library** : [Material UI React](https://github.com/mui-org/material-ui)
|
||||
- **Coding Style** : [Airbnb](https://github.com/airbnb/javascript) (Use [Eslint](https://eslint.org/) to manager)
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
'@Base': path.resolve(__dirname, '..', 'src', 'base'),
|
||||
'@Components': path.resolve(__dirname, '..', 'src', 'components'),
|
||||
'@Reducers': path.resolve(__dirname, '..', 'src', 'reducers'),
|
||||
'@API': path.resolve(__dirname, '..', 'src', 'api'),
|
||||
'@Tools': path.resolve(__dirname, '..', 'src', 'tools'),
|
||||
'@Hooks': path.resolve(__dirname, '..', 'src', 'hooks'),
|
||||
'@Models': path.resolve(__dirname, '..', 'src', 'models'),
|
||||
'@CSS': path.resolve(__dirname, '..', 'src', 'css'),
|
||||
'@Services': path.resolve(__dirname, '..', 'src', 'services'),
|
||||
'@Providers': path.resolve(__dirname, '..', 'src', 'providers'),
|
||||
'@Env': path.resolve(__dirname, '..', 'src', 'env'),
|
||||
'@Langs': path.resolve(__dirname, '..', 'src', 'langs'),
|
||||
'@Mocks': path.resolve(__dirname, '..', 'src', 'mocks'),
|
||||
'@Plugin': path.resolve(__dirname, '..', 'src', 'plugin'),
|
||||
};
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const paths = require('./paths');
|
||||
|
||||
// Make sure that including paths.js after env.js will read .env variables.
|
||||
delete require.cache[require.resolve('./paths')];
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV;
|
||||
if (!NODE_ENV) {
|
||||
throw new Error(
|
||||
'The NODE_ENV environment variable is required but was not specified.'
|
||||
);
|
||||
}
|
||||
|
||||
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
|
||||
const dotenvFiles = [
|
||||
`${paths.dotenv}.${NODE_ENV}.local`,
|
||||
// Don't include `.env.local` for `test` environment
|
||||
// since normally you expect tests to produce the same
|
||||
// results for everyone
|
||||
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
|
||||
`${paths.dotenv}.${NODE_ENV}`,
|
||||
paths.dotenv,
|
||||
].filter(Boolean);
|
||||
|
||||
// Load environment variables from .env* files. Suppress warnings using silent
|
||||
// if this file is missing. dotenv will never modify any environment variables
|
||||
// that have already been set. Variable expansion is supported in .env files.
|
||||
// https://github.com/motdotla/dotenv
|
||||
// https://github.com/motdotla/dotenv-expand
|
||||
dotenvFiles.forEach(dotenvFile => {
|
||||
if (fs.existsSync(dotenvFile)) {
|
||||
require('dotenv-expand')(
|
||||
require('dotenv').config({
|
||||
path: dotenvFile,
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// We support resolving modules according to `NODE_PATH`.
|
||||
// This lets you use absolute paths in imports inside large monorepos:
|
||||
// https://github.com/facebook/create-react-app/issues/253.
|
||||
// It works similar to `NODE_PATH` in Node itself:
|
||||
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
|
||||
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
|
||||
// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
|
||||
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
|
||||
// We also resolve them to make sure all tools using them work consistently.
|
||||
const appDirectory = fs.realpathSync(process.cwd());
|
||||
process.env.NODE_PATH = (process.env.NODE_PATH || '')
|
||||
.split(path.delimiter)
|
||||
.filter(folder => folder && !path.isAbsolute(folder))
|
||||
.map(folder => path.resolve(appDirectory, folder))
|
||||
.join(path.delimiter);
|
||||
|
||||
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
|
||||
// injected into the application via DefinePlugin in webpack configuration.
|
||||
const REACT_APP = /^REACT_APP_/i;
|
||||
|
||||
function getClientEnvironment(publicUrl) {
|
||||
const raw = Object.keys(process.env)
|
||||
.filter(key => REACT_APP.test(key))
|
||||
.reduce(
|
||||
(env, key) => {
|
||||
env[key] = process.env[key];
|
||||
return env;
|
||||
},
|
||||
{
|
||||
// Useful for determining whether we’re running in production mode.
|
||||
// Most importantly, it switches React into the correct mode.
|
||||
NODE_ENV: process.env.NODE_ENV || 'development',
|
||||
// Useful for resolving the correct path to static assets in `public`.
|
||||
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
|
||||
// This should only be used as an escape hatch. Normally you would put
|
||||
// images into the `src` and `import` them in code to get their paths.
|
||||
PUBLIC_URL: publicUrl,
|
||||
// We support configuring the sockjs pathname during development.
|
||||
// These settings let a developer run multiple simultaneous projects.
|
||||
// They are used as the connection `hostname`, `pathname` and `port`
|
||||
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
|
||||
// and `sockPort` options in webpack-dev-server.
|
||||
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
|
||||
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
|
||||
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
|
||||
// Whether or not react-refresh is enabled.
|
||||
// react-refresh is not 100% stable at this time,
|
||||
// which is why it's disabled by default.
|
||||
// It is defined here so it is available in the webpackHotDevClient.
|
||||
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
|
||||
APP_ENV: process.env.APP_ENV || 'development',
|
||||
API_URL: process.env.API_URL || '',
|
||||
}
|
||||
);
|
||||
// Stringify all values so we can feed into webpack DefinePlugin
|
||||
const stringified = {
|
||||
'process.env': Object.keys(raw).reduce((env, key) => {
|
||||
env[key] = JSON.stringify(raw[key]);
|
||||
return env;
|
||||
}, {}),
|
||||
};
|
||||
|
||||
return { raw, stringified };
|
||||
}
|
||||
|
||||
module.exports = getClientEnvironment;
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const crypto = require('crypto');
|
||||
const chalk = require('react-dev-utils/chalk');
|
||||
const paths = require('./paths');
|
||||
|
||||
// Ensure the certificate and key provided are valid and if not
|
||||
// throw an easy to debug error
|
||||
function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
|
||||
let encrypted;
|
||||
try {
|
||||
// publicEncrypt will throw an error with an invalid cert
|
||||
encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
|
||||
} catch (err) {
|
||||
throw new Error(
|
||||
`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
// privateDecrypt will throw an error with an invalid key
|
||||
crypto.privateDecrypt(key, encrypted);
|
||||
} catch (err) {
|
||||
throw new Error(
|
||||
`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
|
||||
err.message
|
||||
}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Read file and throw an error if it doesn't exist
|
||||
function readEnvFile(file, type) {
|
||||
if (!fs.existsSync(file)) {
|
||||
throw new Error(
|
||||
`You specified ${chalk.cyan(
|
||||
type
|
||||
)} in your env, but the file "${chalk.yellow(file)}" can't be found.`
|
||||
);
|
||||
}
|
||||
return fs.readFileSync(file);
|
||||
}
|
||||
|
||||
// Get the https config
|
||||
// Return cert files if provided in env, otherwise just true or false
|
||||
function getHttpsConfig() {
|
||||
const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
|
||||
const isHttps = HTTPS === 'true';
|
||||
|
||||
if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
|
||||
const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
|
||||
const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
|
||||
const config = {
|
||||
cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
|
||||
key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
|
||||
};
|
||||
|
||||
validateKeyAndCerts({ ...config, keyFile, crtFile });
|
||||
return config;
|
||||
}
|
||||
return isHttps;
|
||||
}
|
||||
|
||||
module.exports = getHttpsConfig;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
'use strict';
|
||||
|
||||
// This is a custom Jest transformer turning style imports into empty objects.
|
||||
// http://facebook.github.io/jest/docs/en/webpack.html
|
||||
|
||||
module.exports = {
|
||||
process() {
|
||||
return 'module.exports = {};';
|
||||
},
|
||||
getCacheKey() {
|
||||
// The output is always the same.
|
||||
return 'cssTransform';
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
'use strict';
|
||||
|
||||
const path = require('path');
|
||||
const camelcase = require('camelcase');
|
||||
|
||||
// This is a custom Jest transformer turning file imports into filenames.
|
||||
// http://facebook.github.io/jest/docs/en/webpack.html
|
||||
|
||||
module.exports = {
|
||||
process(src, filename) {
|
||||
const assetFilename = JSON.stringify(path.basename(filename));
|
||||
|
||||
if (filename.match(/\.svg$/)) {
|
||||
// Based on how SVGR generates a component name:
|
||||
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
|
||||
const pascalCaseFilename = camelcase(path.parse(filename).name, {
|
||||
pascalCase: true,
|
||||
});
|
||||
const componentName = `Svg${pascalCaseFilename}`;
|
||||
return `const React = require('react');
|
||||
module.exports = {
|
||||
__esModule: true,
|
||||
default: ${assetFilename},
|
||||
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
|
||||
return {
|
||||
$$typeof: Symbol.for('react.element'),
|
||||
type: 'svg',
|
||||
ref: ref,
|
||||
key: null,
|
||||
props: Object.assign({}, props, {
|
||||
children: ${assetFilename}
|
||||
})
|
||||
};
|
||||
}),
|
||||
};`;
|
||||
}
|
||||
|
||||
return `module.exports = ${assetFilename};`;
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const paths = require('./paths');
|
||||
const chalk = require('react-dev-utils/chalk');
|
||||
const resolve = require('resolve');
|
||||
|
||||
/**
|
||||
* Get additional module paths based on the baseUrl of a compilerOptions object.
|
||||
*
|
||||
* @param {Object} options
|
||||
*/
|
||||
function getAdditionalModulePaths(options = {}) {
|
||||
const baseUrl = options.baseUrl;
|
||||
|
||||
if (!baseUrl) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
|
||||
|
||||
// We don't need to do anything if `baseUrl` is set to `node_modules`. This is
|
||||
// the default behavior.
|
||||
if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Allow the user set the `baseUrl` to `appSrc`.
|
||||
if (path.relative(paths.appSrc, baseUrlResolved) === '') {
|
||||
return [paths.appSrc];
|
||||
}
|
||||
|
||||
// If the path is equal to the root directory we ignore it here.
|
||||
// We don't want to allow importing from the root directly as source files are
|
||||
// not transpiled outside of `src`. We do allow importing them with the
|
||||
// absolute path (e.g. `src/Components/Button.js`) but we set that up with
|
||||
// an alias.
|
||||
if (path.relative(paths.appPath, baseUrlResolved) === '') {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Otherwise, throw an error.
|
||||
throw new Error(
|
||||
chalk.red.bold(
|
||||
"Your project's `baseUrl` can only be set to `src` or `node_modules`." +
|
||||
' Create React App does not support other values at this time.'
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get webpack aliases based on the baseUrl of a compilerOptions object.
|
||||
*
|
||||
* @param {*} options
|
||||
*/
|
||||
function getWebpackAliases(options = {}) {
|
||||
const baseUrl = options.baseUrl;
|
||||
|
||||
if (!baseUrl) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
|
||||
|
||||
if (path.relative(paths.appPath, baseUrlResolved) === '') {
|
||||
return {
|
||||
src: paths.appSrc,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get jest aliases based on the baseUrl of a compilerOptions object.
|
||||
*
|
||||
* @param {*} options
|
||||
*/
|
||||
function getJestAliases(options = {}) {
|
||||
const baseUrl = options.baseUrl;
|
||||
|
||||
if (!baseUrl) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
|
||||
|
||||
if (path.relative(paths.appPath, baseUrlResolved) === '') {
|
||||
return {
|
||||
'^src/(.*)$': '<rootDir>/src/$1',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getModules() {
|
||||
// Check if TypeScript is setup
|
||||
const hasTsConfig = fs.existsSync(paths.appTsConfig);
|
||||
const hasJsConfig = fs.existsSync(paths.appJsConfig);
|
||||
|
||||
if (hasTsConfig && hasJsConfig) {
|
||||
throw new Error(
|
||||
'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
|
||||
);
|
||||
}
|
||||
|
||||
let config;
|
||||
|
||||
// If there's a tsconfig.json we assume it's a
|
||||
// TypeScript project and set up the config
|
||||
// based on tsconfig.json
|
||||
if (hasTsConfig) {
|
||||
const ts = require(resolve.sync('typescript', {
|
||||
basedir: paths.appNodeModules,
|
||||
}));
|
||||
config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
|
||||
// Otherwise we'll check if there is jsconfig.json
|
||||
// for non TS projects.
|
||||
} else if (hasJsConfig) {
|
||||
config = require(paths.appJsConfig);
|
||||
}
|
||||
|
||||
config = config || {};
|
||||
const options = config.compilerOptions || {};
|
||||
|
||||
const additionalModulePaths = getAdditionalModulePaths(options);
|
||||
|
||||
return {
|
||||
additionalModulePaths: additionalModulePaths,
|
||||
webpackAliases: getWebpackAliases(options),
|
||||
jestAliases: getJestAliases(options),
|
||||
hasTsConfig,
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = getModules();
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
'use strict';
|
||||
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
|
||||
|
||||
// Make sure any symlinks in the project folder are resolved:
|
||||
// https://github.com/facebook/create-react-app/issues/637
|
||||
const appDirectory = fs.realpathSync(process.cwd());
|
||||
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
|
||||
|
||||
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
|
||||
// "public path" at which the app is served.
|
||||
// webpack needs to know it to put the right <script> hrefs into HTML even in
|
||||
// single-page apps that may serve index.html for nested URLs like /todos/42.
|
||||
// We can't use a relative path in HTML because we don't want to load something
|
||||
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
|
||||
const publicUrlOrPath = getPublicUrlOrPath(
|
||||
process.env.NODE_ENV === 'development',
|
||||
require(resolveApp('package.json')).homepage,
|
||||
process.env.PUBLIC_URL
|
||||
);
|
||||
|
||||
const moduleFileExtensions = [
|
||||
'web.mjs',
|
||||
'mjs',
|
||||
'web.js',
|
||||
'js',
|
||||
'web.ts',
|
||||
'ts',
|
||||
'web.tsx',
|
||||
'tsx',
|
||||
'json',
|
||||
'web.jsx',
|
||||
'jsx',
|
||||
];
|
||||
|
||||
// Resolve file paths in the same order as webpack
|
||||
const resolveModule = (resolveFn, filePath) => {
|
||||
const extension = moduleFileExtensions.find(extension =>
|
||||
fs.existsSync(resolveFn(`${filePath}.${extension}`))
|
||||
);
|
||||
|
||||
if (extension) {
|
||||
return resolveFn(`${filePath}.${extension}`);
|
||||
}
|
||||
|
||||
return resolveFn(`${filePath}.js`);
|
||||
};
|
||||
|
||||
// config after eject: we're in ./config/
|
||||
module.exports = {
|
||||
dotenv: resolveApp('.env'),
|
||||
appPath: resolveApp('.'),
|
||||
appBuild: resolveApp('build'),
|
||||
appPublic: resolveApp('public'),
|
||||
appHtml: resolveApp('public/index.html'),
|
||||
appIndexJs: resolveModule(resolveApp, 'src/index'),
|
||||
appPackageJson: resolveApp('package.json'),
|
||||
appSrc: resolveApp('src'),
|
||||
appTsConfig: resolveApp('tsconfig.json'),
|
||||
appJsConfig: resolveApp('jsconfig.json'),
|
||||
yarnLockFile: resolveApp('yarn.lock'),
|
||||
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
|
||||
proxySetup: resolveApp('src/setupProxy.js'),
|
||||
appNodeModules: resolveApp('node_modules'),
|
||||
swSrc: resolveModule(resolveApp, 'src/service-worker'),
|
||||
publicUrlOrPath,
|
||||
};
|
||||
|
||||
|
||||
|
||||
module.exports.moduleFileExtensions = moduleFileExtensions;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
'use strict';
|
||||
|
||||
const { resolveModuleName } = require('ts-pnp');
|
||||
|
||||
exports.resolveModuleName = (
|
||||
typescript,
|
||||
moduleName,
|
||||
containingFile,
|
||||
compilerOptions,
|
||||
resolutionHost
|
||||
) => {
|
||||
return resolveModuleName(
|
||||
moduleName,
|
||||
containingFile,
|
||||
compilerOptions,
|
||||
resolutionHost,
|
||||
typescript.resolveModuleName
|
||||
);
|
||||
};
|
||||
|
||||
exports.resolveTypeReferenceDirective = (
|
||||
typescript,
|
||||
moduleName,
|
||||
containingFile,
|
||||
compilerOptions,
|
||||
resolutionHost
|
||||
) => {
|
||||
return resolveModuleName(
|
||||
moduleName,
|
||||
containingFile,
|
||||
compilerOptions,
|
||||
resolutionHost,
|
||||
typescript.resolveTypeReferenceDirective
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,532 @@
|
|||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const resolve = require('resolve');
|
||||
const PnpWebpackPlugin = require('pnp-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
||||
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const safePostCssParser = require('postcss-safe-parser');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
|
||||
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
|
||||
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
|
||||
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
|
||||
const ESLintPlugin = require('eslint-webpack-plugin');
|
||||
const paths = require('./paths');
|
||||
const modules = require('./modules');
|
||||
const alias = require('./alias');
|
||||
const getClientEnvironment = require('./env');
|
||||
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
|
||||
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
|
||||
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
|
||||
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
||||
|
||||
const postcssNormalize = require('postcss-normalize');
|
||||
|
||||
const appPackageJson = require(paths.appPackageJson);
|
||||
|
||||
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
|
||||
|
||||
const webpackDevClientEntry = require.resolve(
|
||||
'react-dev-utils/webpackHotDevClient'
|
||||
);
|
||||
const reactRefreshOverlayEntry = require.resolve(
|
||||
'react-dev-utils/refreshOverlayInterop'
|
||||
);
|
||||
|
||||
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
|
||||
|
||||
const imageInlineSizeLimit = parseInt(
|
||||
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
|
||||
);
|
||||
|
||||
const useTypeScript = fs.existsSync(paths.appTsConfig);
|
||||
|
||||
const swSrc = paths.swSrc;
|
||||
|
||||
const cssRegex = /\.css$/;
|
||||
const cssModuleRegex = /\.module\.css$/;
|
||||
const sassRegex = /\.(scss|sass)$/;
|
||||
const sassModuleRegex = /\.module\.(scss|sass)$/;
|
||||
|
||||
const hasJsxRuntime = (() => {
|
||||
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
require.resolve('react/jsx-runtime');
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
})();
|
||||
|
||||
module.exports = function (webpackEnv) {
|
||||
const isEnvDevelopment = webpackEnv === 'development';
|
||||
const isEnvProduction = webpackEnv === 'production';
|
||||
|
||||
const isEnvProductionProfile =
|
||||
isEnvProduction && process.argv.includes('--profile');
|
||||
|
||||
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
|
||||
|
||||
const shouldUseReactRefresh = env.raw.FAST_REFRESH;
|
||||
|
||||
const getStyleLoaders = (cssOptions, preProcessor) => {
|
||||
const loaders = [
|
||||
isEnvDevelopment && require.resolve('style-loader'),
|
||||
isEnvProduction && {
|
||||
loader: require.resolve('style-loader'),
|
||||
options: paths.publicUrlOrPath.startsWith('.')
|
||||
? { publicPath: '../../', attributes: { nonce: 'MzA3MWM2MTA4NjFhYzY1Y2RlOTRjZjdiODdkNzczNjkK'} }
|
||||
: { attributes: { nonce: 'MzA3MWM2MTA4NjFhYzY1Y2RlOTRjZjdiODdkNzczNjkK'} },
|
||||
},
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: cssOptions,
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
ident: 'postcss',
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'),
|
||||
require('postcss-preset-env')({
|
||||
autoprefixer: {
|
||||
flexbox: 'no-2009',
|
||||
},
|
||||
stage: 3,
|
||||
}),
|
||||
postcssNormalize(),
|
||||
],
|
||||
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
|
||||
},
|
||||
},
|
||||
].filter(Boolean);
|
||||
if (preProcessor) {
|
||||
loaders.push(
|
||||
{
|
||||
loader: require.resolve('resolve-url-loader'),
|
||||
options: {
|
||||
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
|
||||
root: paths.appSrc,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve(preProcessor),
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
return loaders;
|
||||
};
|
||||
console.log('-----------------');
|
||||
console.log('Build Time Env ::: ', process.env.APP_ENV);
|
||||
console.log('Build Time API Url ::: ', process.env.API_URL);
|
||||
console.log('Build Time NODE Env ::: ', process.env.NODE_ENV);
|
||||
console.log('Build Time Replace Origin Logo ::: ', process.env.REPLACE_COMPANY_LOGO);
|
||||
console.log('-----------------');
|
||||
return {
|
||||
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
|
||||
bail: isEnvProduction,
|
||||
devtool: isEnvProduction
|
||||
? shouldUseSourceMap
|
||||
? 'source-map'
|
||||
: false
|
||||
: isEnvDevelopment && 'cheap-module-source-map',
|
||||
entry:
|
||||
isEnvDevelopment && !shouldUseReactRefresh
|
||||
? [
|
||||
webpackDevClientEntry,
|
||||
paths.appIndexJs,
|
||||
]
|
||||
: paths.appIndexJs,
|
||||
output: {
|
||||
path: isEnvProduction ? paths.appBuild : undefined,
|
||||
pathinfo: isEnvDevelopment,
|
||||
filename: isEnvProduction
|
||||
? 'static/js/[name].[contenthash:8].js'
|
||||
: isEnvDevelopment && 'static/js/bundle.js',
|
||||
futureEmitAssets: true,
|
||||
chunkFilename: isEnvProduction
|
||||
? 'static/js/[name].[contenthash:8].chunk.js'
|
||||
: isEnvDevelopment && 'static/js/[name].chunk.js',
|
||||
publicPath: paths.publicUrlOrPath,
|
||||
devtoolModuleFilenameTemplate: isEnvProduction
|
||||
? info =>
|
||||
path
|
||||
.relative(paths.appSrc, info.absoluteResourcePath)
|
||||
.replace(/\\/g, '/')
|
||||
: isEnvDevelopment &&
|
||||
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
|
||||
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
|
||||
globalObject: 'this',
|
||||
},
|
||||
optimization: {
|
||||
minimize: isEnvProduction,
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
parse: {
|
||||
ecma: 8,
|
||||
},
|
||||
compress: {
|
||||
ecma: 5,
|
||||
warnings: false,
|
||||
comparisons: false,
|
||||
inline: 2,
|
||||
},
|
||||
mangle: {
|
||||
safari10: true,
|
||||
},
|
||||
keep_classnames: isEnvProductionProfile,
|
||||
keep_fnames: isEnvProductionProfile,
|
||||
output: {
|
||||
ecma: 5,
|
||||
comments: false,
|
||||
ascii_only: true,
|
||||
},
|
||||
},
|
||||
sourceMap: shouldUseSourceMap,
|
||||
}),
|
||||
new OptimizeCSSAssetsPlugin({
|
||||
cssProcessorOptions: {
|
||||
parser: safePostCssParser,
|
||||
map: shouldUseSourceMap
|
||||
? {
|
||||
inline: false,
|
||||
annotation: true,
|
||||
}
|
||||
: false,
|
||||
},
|
||||
cssProcessorPluginOptions: {
|
||||
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
|
||||
},
|
||||
}),
|
||||
],
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
name: false,
|
||||
},
|
||||
runtimeChunk: {
|
||||
name: entrypoint => `runtime-${entrypoint.name}`,
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
modules: ['node_modules', paths.appNodeModules].concat(
|
||||
modules.additionalModulePaths || []
|
||||
),
|
||||
extensions: paths.moduleFileExtensions
|
||||
.map(ext => `.${ext}`)
|
||||
.filter(ext => useTypeScript || !ext.includes('ts')),
|
||||
alias: {
|
||||
'react-native': 'react-native-web',
|
||||
...(isEnvProductionProfile && {
|
||||
'react-dom$': 'react-dom/profiling',
|
||||
'scheduler/tracing': 'scheduler/tracing-profiling',
|
||||
}),
|
||||
...(modules.webpackAliases || {}),
|
||||
...alias,
|
||||
},
|
||||
plugins: [
|
||||
PnpWebpackPlugin,
|
||||
new ModuleScopePlugin(paths.appSrc, [
|
||||
paths.appPackageJson,
|
||||
reactRefreshOverlayEntry,
|
||||
]),
|
||||
],
|
||||
},
|
||||
resolveLoader: {
|
||||
plugins: [
|
||||
PnpWebpackPlugin.moduleLoader(module),
|
||||
],
|
||||
},
|
||||
module: {
|
||||
strictExportPresence: true,
|
||||
rules: [
|
||||
{ parser: { requireEnsure: false } },
|
||||
{
|
||||
oneOf: [
|
||||
{
|
||||
test: [/\.avif$/],
|
||||
loader: require.resolve('url-loader'),
|
||||
options: {
|
||||
limit: imageInlineSizeLimit,
|
||||
mimetype: 'image/avif',
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||
loader: require.resolve('url-loader'),
|
||||
options: {
|
||||
limit: imageInlineSizeLimit,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(js|mjs|jsx|ts|tsx)$/,
|
||||
include: paths.appSrc,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
customize: require.resolve(
|
||||
'babel-preset-react-app/webpack-overrides'
|
||||
),
|
||||
presets: [
|
||||
[
|
||||
require.resolve('babel-preset-react-app'),
|
||||
{
|
||||
runtime: hasJsxRuntime ? 'automatic' : 'classic',
|
||||
},
|
||||
],
|
||||
],
|
||||
|
||||
plugins: [
|
||||
[
|
||||
require.resolve('babel-plugin-named-asset-import'),
|
||||
{
|
||||
loaderMap: {
|
||||
svg: {
|
||||
ReactComponent:
|
||||
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
isEnvDevelopment &&
|
||||
shouldUseReactRefresh &&
|
||||
require.resolve('react-refresh/babel'),
|
||||
].filter(Boolean),
|
||||
cacheDirectory: true,
|
||||
cacheCompression: false,
|
||||
compact: isEnvProduction,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(js|mjs)$/,
|
||||
exclude: /@babel(?:\/|\\{1,2})runtime/,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
compact: false,
|
||||
presets: [
|
||||
[
|
||||
require.resolve('babel-preset-react-app/dependencies'),
|
||||
{
|
||||
helpers: true,
|
||||
useBuiltIns: 'entry'
|
||||
},
|
||||
],
|
||||
],
|
||||
cacheDirectory: true,
|
||||
cacheCompression: false,
|
||||
sourceMaps: shouldUseSourceMap,
|
||||
inputSourceMap: shouldUseSourceMap,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: cssRegex,
|
||||
exclude: cssModuleRegex,
|
||||
use: getStyleLoaders({
|
||||
importLoaders: 1,
|
||||
sourceMap: isEnvProduction
|
||||
? shouldUseSourceMap
|
||||
: isEnvDevelopment,
|
||||
}),
|
||||
sideEffects: true,
|
||||
},
|
||||
{
|
||||
test: cssModuleRegex,
|
||||
use: getStyleLoaders({
|
||||
importLoaders: 1,
|
||||
sourceMap: isEnvProduction
|
||||
? shouldUseSourceMap
|
||||
: isEnvDevelopment,
|
||||
modules: {
|
||||
getLocalIdent: getCSSModuleLocalIdent,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
test: sassRegex,
|
||||
exclude: sassModuleRegex,
|
||||
use: getStyleLoaders(
|
||||
{
|
||||
importLoaders: 3,
|
||||
sourceMap: isEnvProduction
|
||||
? shouldUseSourceMap
|
||||
: isEnvDevelopment,
|
||||
},
|
||||
'sass-loader'
|
||||
),
|
||||
sideEffects: true,
|
||||
},
|
||||
{
|
||||
test: sassModuleRegex,
|
||||
use: getStyleLoaders(
|
||||
{
|
||||
importLoaders: 3,
|
||||
sourceMap: isEnvProduction
|
||||
? shouldUseSourceMap
|
||||
: isEnvDevelopment,
|
||||
modules: {
|
||||
getLocalIdent: getCSSModuleLocalIdent,
|
||||
},
|
||||
},
|
||||
'sass-loader'
|
||||
),
|
||||
},
|
||||
{
|
||||
loader: require.resolve('file-loader'),
|
||||
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
|
||||
options: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin(
|
||||
Object.assign(
|
||||
{},
|
||||
{
|
||||
inject: true,
|
||||
template: paths.appHtml,
|
||||
},
|
||||
isEnvProduction
|
||||
? {
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeRedundantAttributes: true,
|
||||
useShortDoctype: true,
|
||||
removeEmptyAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
keepClosingSlash: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
minifyURLs: true,
|
||||
},
|
||||
}
|
||||
: undefined
|
||||
)
|
||||
),
|
||||
isEnvProduction &&
|
||||
shouldInlineRuntimeChunk &&
|
||||
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
|
||||
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
|
||||
new ModuleNotFoundPlugin(paths.appPath),
|
||||
new webpack.DefinePlugin(env.stringified),
|
||||
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
|
||||
isEnvDevelopment &&
|
||||
shouldUseReactRefresh &&
|
||||
new ReactRefreshWebpackPlugin({
|
||||
overlay: {
|
||||
entry: webpackDevClientEntry,
|
||||
module: reactRefreshOverlayEntry,
|
||||
sockIntegration: false,
|
||||
},
|
||||
}),
|
||||
isEnvDevelopment && new CaseSensitivePathsPlugin(),
|
||||
isEnvDevelopment &&
|
||||
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
|
||||
isEnvProduction &&
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'static/css/[name].[contenthash:8].css',
|
||||
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
|
||||
}),
|
||||
new ManifestPlugin({
|
||||
fileName: 'asset-manifest.json',
|
||||
publicPath: paths.publicUrlOrPath,
|
||||
generate: (seed, files, entrypoints) => {
|
||||
const manifestFiles = files.reduce((manifest, file) => {
|
||||
manifest[file.name] = file.path;
|
||||
return manifest;
|
||||
}, seed);
|
||||
const entrypointFiles = entrypoints.main.filter(
|
||||
fileName => !fileName.endsWith('.map')
|
||||
);
|
||||
|
||||
return {
|
||||
files: manifestFiles,
|
||||
entrypoints: entrypointFiles,
|
||||
};
|
||||
},
|
||||
}),
|
||||
isEnvProduction &&
|
||||
fs.existsSync(swSrc) &&
|
||||
new WorkboxWebpackPlugin.InjectManifest({
|
||||
swSrc,
|
||||
dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
|
||||
exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
|
||||
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
|
||||
}),
|
||||
useTypeScript &&
|
||||
new ForkTsCheckerWebpackPlugin({
|
||||
typescript: resolve.sync('typescript', {
|
||||
basedir: paths.appNodeModules,
|
||||
}),
|
||||
async: isEnvDevelopment,
|
||||
checkSyntacticErrors: true,
|
||||
resolveModuleNameModule: process.versions.pnp
|
||||
? `${__dirname}/pnpTs.js`
|
||||
: undefined,
|
||||
resolveTypeReferenceDirectiveModule: process.versions.pnp
|
||||
? `${__dirname}/pnpTs.js`
|
||||
: undefined,
|
||||
tsconfig: paths.appTsConfig,
|
||||
reportFiles: [
|
||||
'../**/src/**/*.{ts,tsx}',
|
||||
'**/src/**/*.{ts,tsx}',
|
||||
'!**/src/**/__tests__/**',
|
||||
'!**/src/**/?(*.)(spec|test).*',
|
||||
'!**/src/setupProxy.*',
|
||||
'!**/src/setupTests.*',
|
||||
],
|
||||
silent: true,
|
||||
formatter: isEnvProduction ? typescriptFormatter : undefined,
|
||||
}),
|
||||
new ESLintPlugin({
|
||||
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
|
||||
formatter: require.resolve('react-dev-utils/eslintFormatter'),
|
||||
eslintPath: require.resolve('eslint'),
|
||||
context: paths.appSrc,
|
||||
cache: true,
|
||||
cwd: paths.appPath,
|
||||
resolvePluginsRelativeTo: __dirname,
|
||||
baseConfig: {
|
||||
extends: [require.resolve('eslint-config-react-app/base')],
|
||||
rules: {
|
||||
...(!hasJsxRuntime && {
|
||||
'react/react-in-jsx-scope': 'error',
|
||||
}),
|
||||
},
|
||||
},
|
||||
}),
|
||||
].filter(Boolean),
|
||||
node: {
|
||||
module: 'empty',
|
||||
dgram: 'empty',
|
||||
dns: 'mock',
|
||||
fs: 'empty',
|
||||
http2: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
child_process: 'empty',
|
||||
},
|
||||
performance: false,
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
|
||||
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
|
||||
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
|
||||
const ignoredFiles = require('react-dev-utils/ignoredFiles');
|
||||
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
|
||||
const paths = require('./paths');
|
||||
const getHttpsConfig = require('./getHttpsConfig');
|
||||
|
||||
const host = process.env.HOST || '0.0.0.0';
|
||||
const sockHost = process.env.WDS_SOCKET_HOST;
|
||||
const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
|
||||
const sockPort = process.env.WDS_SOCKET_PORT;
|
||||
|
||||
module.exports = function (proxy, allowedHost) {
|
||||
return {
|
||||
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
|
||||
// websites from potentially accessing local content through DNS rebinding:
|
||||
// https://github.com/webpack/webpack-dev-server/issues/887
|
||||
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
|
||||
// However, it made several existing use cases such as development in cloud
|
||||
// environment or subdomains in development significantly more complicated:
|
||||
// https://github.com/facebook/create-react-app/issues/2271
|
||||
// https://github.com/facebook/create-react-app/issues/2233
|
||||
// While we're investigating better solutions, for now we will take a
|
||||
// compromise. Since our WDS configuration only serves files in the `public`
|
||||
// folder we won't consider accessing them a vulnerability. However, if you
|
||||
// use the `proxy` feature, it gets more dangerous because it can expose
|
||||
// remote code execution vulnerabilities in backends like Django and Rails.
|
||||
// So we will disable the host check normally, but enable it if you have
|
||||
// specified the `proxy` setting. Finally, we let you override it if you
|
||||
// really know what you're doing with a special environment variable.
|
||||
disableHostCheck:
|
||||
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
|
||||
// Enable gzip compression of generated files.
|
||||
compress: true,
|
||||
// Silence WebpackDevServer's own logs since they're generally not useful.
|
||||
// It will still show compile warnings and errors with this setting.
|
||||
clientLogLevel: 'none',
|
||||
// By default WebpackDevServer serves physical files from current directory
|
||||
// in addition to all the virtual build products that it serves from memory.
|
||||
// This is confusing because those files won’t automatically be available in
|
||||
// production build folder unless we copy them. However, copying the whole
|
||||
// project directory is dangerous because we may expose sensitive files.
|
||||
// Instead, we establish a convention that only files in `public` directory
|
||||
// get served. Our build script will copy `public` into the `build` folder.
|
||||
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
|
||||
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
|
||||
// Note that we only recommend to use `public` folder as an escape hatch
|
||||
// for files like `favicon.ico`, `manifest.json`, and libraries that are
|
||||
// for some reason broken when imported through webpack. If you just want to
|
||||
// use an image, put it in `src` and `import` it from JavaScript instead.
|
||||
contentBase: paths.appPublic,
|
||||
contentBasePublicPath: paths.publicUrlOrPath,
|
||||
// By default files from `contentBase` will not trigger a page reload.
|
||||
watchContentBase: true,
|
||||
// Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
|
||||
// for the WebpackDevServer client so it can learn when the files were
|
||||
// updated. The WebpackDevServer client is included as an entry point
|
||||
// in the webpack development configuration. Note that only changes
|
||||
// to CSS are currently hot reloaded. JS changes will refresh the browser.
|
||||
hot: true,
|
||||
// Use 'ws' instead of 'sockjs-node' on server since we're using native
|
||||
// websockets in `webpackHotDevClient`.
|
||||
transportMode: 'ws',
|
||||
// Prevent a WS client from getting injected as we're already including
|
||||
// `webpackHotDevClient`.
|
||||
injectClient: false,
|
||||
// Enable custom sockjs pathname for websocket connection to hot reloading server.
|
||||
// Enable custom sockjs hostname, pathname and port for websocket connection
|
||||
// to hot reloading server.
|
||||
sockHost,
|
||||
sockPath,
|
||||
sockPort,
|
||||
// It is important to tell WebpackDevServer to use the same "publicPath" path as
|
||||
// we specified in the webpack config. When homepage is '.', default to serving
|
||||
// from the root.
|
||||
// remove last slash so user can land on `/test` instead of `/test/`
|
||||
publicPath: paths.publicUrlOrPath.slice(0, -1),
|
||||
// WebpackDevServer is noisy by default so we emit custom message instead
|
||||
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
|
||||
quiet: true,
|
||||
// Reportedly, this avoids CPU overload on some systems.
|
||||
// https://github.com/facebook/create-react-app/issues/293
|
||||
// src/node_modules is not ignored to support absolute imports
|
||||
// https://github.com/facebook/create-react-app/issues/1065
|
||||
watchOptions: {
|
||||
ignored: ignoredFiles(paths.appSrc),
|
||||
},
|
||||
https: getHttpsConfig(),
|
||||
host,
|
||||
overlay: false,
|
||||
historyApiFallback: {
|
||||
// Paths with dots should still use the history fallback.
|
||||
// See https://github.com/facebook/create-react-app/issues/387.
|
||||
disableDotRule: true,
|
||||
index: paths.publicUrlOrPath,
|
||||
},
|
||||
public: allowedHost,
|
||||
// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
|
||||
proxy,
|
||||
before(app, server) {
|
||||
// Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
|
||||
// middlewares before `redirectServedPath` otherwise will not have any effect
|
||||
// This lets us fetch source contents from webpack for the error overlay
|
||||
app.use(evalSourceMapMiddleware(server));
|
||||
// This lets us open files from the runtime error overlay.
|
||||
app.use(errorOverlayMiddleware());
|
||||
|
||||
if (fs.existsSync(paths.proxySetup)) {
|
||||
// This registers user provided middleware for proxy reasons
|
||||
require(paths.proxySetup)(app);
|
||||
}
|
||||
},
|
||||
after(app) {
|
||||
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
|
||||
app.use(redirectServedPath(paths.publicUrlOrPath));
|
||||
|
||||
// This service worker file is effectively a 'no-op' that will reset any
|
||||
// previous service worker registered for the same host:port combination.
|
||||
// We do this in development to avoid hitting the production cache if
|
||||
// it used the same host and port.
|
||||
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
|
||||
app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
server {
|
||||
listen 8080;
|
||||
server_name localhost;
|
||||
|
||||
port_in_redirect off;
|
||||
absolute_redirect off;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
location / {
|
||||
#add_header Content-Security-Policy "default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; base-uri 'self'";
|
||||
add_header X-Frame-Options SAMEORIGIN;
|
||||
add_header Cache-Control no-cache;
|
||||
add_header X-Content-Type-Options nosniff;
|
||||
add_header X-XSS-Protection '1; mode=block';
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,219 @@
|
|||
{
|
||||
"name": "keycloak-demo-frontend",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "7.13.8",
|
||||
"@date-io/dayjs": "^1.3.13",
|
||||
"@material-ui/core": "^4.11.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.57",
|
||||
"@material-ui/pickers": "^3.2.10",
|
||||
"@types/jest": "^26.0.20",
|
||||
"@types/node": "^12.19.9",
|
||||
"@types/react": "^16.14.2",
|
||||
"@types/react-dom": "^16.9.10",
|
||||
"@types/react-redux": "^7.1.16",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"axios": "^0.21.1",
|
||||
"classnames": "^2.2.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"dayjs": "^1.10.4",
|
||||
"immer": "^8.0.1",
|
||||
"js-base64": "^3.6.0",
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"lodash": "^4.17.21",
|
||||
"qs": "^6.5.2",
|
||||
"react": "16.13.1",
|
||||
"react-color": "^2.19.3",
|
||||
"react-dom": "16.13.1",
|
||||
"react-redux": "^7.2.2",
|
||||
"react-refresh": "^0.8.3",
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"redux": "^4.0.5",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js --progress",
|
||||
"build": "npm run clean && node scripts/build.js --progress",
|
||||
"test": "node scripts/test.js",
|
||||
"test:simple": "npm run test -- --watchAll=false",
|
||||
"test:coverage": "npm run test -- --coverage --watchAll=false",
|
||||
"dev": "cross-env NODE_ENV=development APP_ENV=dev npm run start",
|
||||
"stage": "cross-env NODE_ENV=development APP_ENV=stage npm run start",
|
||||
"production": "cross-env NODE_ENV=production APP_ENV=production npm run start",
|
||||
"renew:dev": "rm -rf node_modules && npm i && npm audit fix && npm run dev",
|
||||
"renew:stage": "rm -rf node_modules && npm i && npm audit fix && npm run stage",
|
||||
"renew:prod": "rm -rf node_modules && npm i && npm audit fix && npm run production",
|
||||
"lint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
|
||||
"lintFix": "eslint --ext .js,.jsx,.ts,.tsx ./src --fix",
|
||||
"clean": "rimraf ./build",
|
||||
"createTemplate": "node scripts/TemplateTool/index.js"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all",
|
||||
"ie 11"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version",
|
||||
"ie 11"
|
||||
]
|
||||
},
|
||||
"jest": {
|
||||
"roots": [
|
||||
"<rootDir>/src"
|
||||
],
|
||||
"collectCoverageFrom": [
|
||||
"src/**/*.{js,jsx,ts,tsx}",
|
||||
"!src/**/*.d.ts"
|
||||
],
|
||||
"coveragePathIgnorePatterns": [
|
||||
"node_modules"
|
||||
],
|
||||
"setupFiles": [
|
||||
"react-app-polyfill/jsdom"
|
||||
],
|
||||
"setupFilesAfterEnv": [
|
||||
"<rootDir>/src/services/Scripts/setupTests.ts"
|
||||
],
|
||||
"testMatch": [
|
||||
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
|
||||
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
|
||||
],
|
||||
"testEnvironment": "jsdom",
|
||||
"transform": {
|
||||
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
|
||||
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
|
||||
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
|
||||
},
|
||||
"transformIgnorePatterns": [
|
||||
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
|
||||
"^.+\\.module\\.(css|sass|scss)$"
|
||||
],
|
||||
"modulePaths": [],
|
||||
"moduleNameMapper": {
|
||||
"^react-native$": "react-native-web",
|
||||
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
|
||||
"^@Base(.*)$": "<rootDir>/src/base/$1",
|
||||
"^@Components(.*)$": "<rootDir>/src/components/$1",
|
||||
"^@Reducers(.*)$": "<rootDir>/src/reducers/$1",
|
||||
"^@API(.*)$": "<rootDir>/src/api/$1",
|
||||
"^@Hooks(.*)$": "<rootDir>/src/hooks/$1",
|
||||
"^@Models(.*)$": "<rootDir>/src/models/$1",
|
||||
"^@CSS(.*)$": "<rootDir>/src/css/$1",
|
||||
"^@Services(.*)$": "<rootDir>/src/services/$1",
|
||||
"^@Providers(.*)$": "<rootDir>/src/providers/$1",
|
||||
"^@Env(.*)$": "<rootDir>/src/env/$1",
|
||||
"^@Langs(.*)$": "<rootDir>/src/langs/$1",
|
||||
"^@Mocks(.*)$": "<rootDir>/src/mocks/$1",
|
||||
"^@Tools(.*)$": "<rootDir>/src/tools/$1",
|
||||
"^@Plugin(.*)$": "<rootDir>/src/plugin/$1"
|
||||
},
|
||||
"moduleFileExtensions": [
|
||||
"web.js",
|
||||
"js",
|
||||
"web.ts",
|
||||
"ts",
|
||||
"web.tsx",
|
||||
"tsx",
|
||||
"json",
|
||||
"web.jsx",
|
||||
"jsx",
|
||||
"node"
|
||||
],
|
||||
"watchPlugins": [
|
||||
"jest-watch-typeahead/filename",
|
||||
"jest-watch-typeahead/testname"
|
||||
],
|
||||
"resetMocks": true
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"react-app"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
|
||||
"@svgr/webpack": "5.5.0",
|
||||
"@testing-library/jest-dom": "^5.11.9",
|
||||
"@testing-library/react": "^11.2.5",
|
||||
"@testing-library/user-event": "^12.8.1",
|
||||
"@types/classnames": "^2.2.11",
|
||||
"@types/lodash": "^4.14.168",
|
||||
"@types/react-color": "^3.0.4",
|
||||
"@typescript-eslint/eslint-plugin": "^4.16.1",
|
||||
"@typescript-eslint/parser": "^4.16.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^26.6.3",
|
||||
"babel-loader": "8.2.2",
|
||||
"babel-plugin-named-asset-import": "^0.3.7",
|
||||
"babel-preset-react-app": "^10.0.0",
|
||||
"bfj": "^7.0.2",
|
||||
"camelcase": "^6.2.0",
|
||||
"case-sensitive-paths-webpack-plugin": "2.4.0",
|
||||
"css-loader": "4.3.0",
|
||||
"dotenv": "8.2.0",
|
||||
"dotenv-expand": "5.1.0",
|
||||
"eslint": "^7.21.0",
|
||||
"eslint-config-airbnb": "^18.2.1",
|
||||
"eslint-config-prettier": "^7.1.0",
|
||||
"eslint-config-react-app": "^6.0.0",
|
||||
"eslint-import-resolver-alias": "^1.1.2",
|
||||
"eslint-import-resolver-typescript": "^2.4.0",
|
||||
"eslint-plugin-flowtype": "^5.3.1",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-jest": "^24.1.8",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-react": "^7.22.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"eslint-plugin-testing-library": "^3.10.1",
|
||||
"eslint-webpack-plugin": "^2.5.2",
|
||||
"file-loader": "6.2.0",
|
||||
"fs-extra": "^9.1.0",
|
||||
"html-webpack-plugin": "4.5.0",
|
||||
"identity-obj-proxy": "3.0.0",
|
||||
"jest": "26.6.3",
|
||||
"jest-circus": "26.6.3",
|
||||
"jest-resolve": "26.6.2",
|
||||
"jest-watch-typeahead": "0.6.1",
|
||||
"mini-css-extract-plugin": "0.11.3",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.4",
|
||||
"pnp-webpack-plugin": "1.6.4",
|
||||
"postcss-flexbugs-fixes": "4.2.1",
|
||||
"postcss-loader": "3.0.0",
|
||||
"postcss-normalize": "8.0.1",
|
||||
"postcss-preset-env": "6.7.0",
|
||||
"postcss-safe-parser": "5.0.2",
|
||||
"prettier": "^2.2.1",
|
||||
"prompts": "2.4.0",
|
||||
"react-app-polyfill": "^2.0.0",
|
||||
"react-dev-utils": "^11.0.3",
|
||||
"resolve": "1.20.0",
|
||||
"resolve-url-loader": "^3.1.2",
|
||||
"sass-loader": "8.0.2",
|
||||
"semver": "7.3.4",
|
||||
"style-loader": "1.3.0",
|
||||
"terser-webpack-plugin": "4.2.3",
|
||||
"ts-pnp": "1.2.0",
|
||||
"typescript": "^4.2.3",
|
||||
"url-loader": "4.1.1",
|
||||
"webpack": "4.44.2",
|
||||
"webpack-dev-server": "3.11.2",
|
||||
"webpack-manifest-plugin": "2.2.0",
|
||||
"workbox-webpack-plugin": "5.1.4"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" id="app">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/logo.png" />
|
||||
<meta property="csp-nonce" content="MzA3MWM2MTA4NjFhYzY1Y2RlOTRjZjdiODdkNzczNjkK" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
|
||||
<title>KeyCloak Frontend Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,212 @@
|
|||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'production';
|
||||
process.env.NODE_ENV = 'production';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('../config/env');
|
||||
|
||||
|
||||
const path = require('path');
|
||||
const chalk = require('react-dev-utils/chalk');
|
||||
const fs = require('fs-extra');
|
||||
const bfj = require('bfj');
|
||||
const webpack = require('webpack');
|
||||
const configFactory = require('../config/webpack.config');
|
||||
const paths = require('../config/paths');
|
||||
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
|
||||
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
|
||||
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
|
||||
const printBuildError = require('react-dev-utils/printBuildError');
|
||||
|
||||
const measureFileSizesBeforeBuild =
|
||||
FileSizeReporter.measureFileSizesBeforeBuild;
|
||||
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
|
||||
const useYarn = fs.existsSync(paths.yarnLockFile);
|
||||
|
||||
// These sizes are pretty large. We'll warn for bundles exceeding them.
|
||||
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
|
||||
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
|
||||
|
||||
const isInteractive = process.stdout.isTTY;
|
||||
|
||||
// Warn and crash if required files are missing
|
||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const argv = process.argv.slice(2);
|
||||
const writeStatsJson = argv.indexOf('--stats') !== -1;
|
||||
|
||||
// Generate configuration
|
||||
const config = configFactory('production');
|
||||
|
||||
// We require that you explicitly set browsers and do not fall back to
|
||||
// browserslist defaults.
|
||||
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
|
||||
checkBrowsers(paths.appPath, isInteractive)
|
||||
.then(() => {
|
||||
// First, read the current file sizes in build directory.
|
||||
// This lets us display how much they changed later.
|
||||
return measureFileSizesBeforeBuild(paths.appBuild);
|
||||
})
|
||||
.then(previousFileSizes => {
|
||||
// Remove all content but keep the directory so that
|
||||
// if you're in it, you don't end up in Trash
|
||||
fs.emptyDirSync(paths.appBuild);
|
||||
// Merge with the public folder
|
||||
copyPublicFolder();
|
||||
// Start the webpack build
|
||||
return build(previousFileSizes);
|
||||
})
|
||||
.then(
|
||||
({ stats, previousFileSizes, warnings }) => {
|
||||
if (warnings.length) {
|
||||
console.log(chalk.yellow('Compiled with warnings.\n'));
|
||||
console.log(warnings.join('\n\n'));
|
||||
console.log(
|
||||
'\nSearch for the ' +
|
||||
chalk.underline(chalk.yellow('keywords')) +
|
||||
' to learn more about each warning.'
|
||||
);
|
||||
console.log(
|
||||
'To ignore, add ' +
|
||||
chalk.cyan('// eslint-disable-next-line') +
|
||||
' to the line before.\n'
|
||||
);
|
||||
} else {
|
||||
console.log(chalk.green('Compiled successfully.\n'));
|
||||
}
|
||||
|
||||
console.log('File sizes after gzip:\n');
|
||||
printFileSizesAfterBuild(
|
||||
stats,
|
||||
previousFileSizes,
|
||||
paths.appBuild,
|
||||
WARN_AFTER_BUNDLE_GZIP_SIZE,
|
||||
WARN_AFTER_CHUNK_GZIP_SIZE
|
||||
);
|
||||
console.log();
|
||||
|
||||
const appPackage = require(paths.appPackageJson);
|
||||
const publicUrl = paths.publicUrlOrPath;
|
||||
const publicPath = config.output.publicPath;
|
||||
const buildFolder = path.relative(process.cwd(), paths.appBuild);
|
||||
printHostingInstructions(
|
||||
appPackage,
|
||||
publicUrl,
|
||||
publicPath,
|
||||
buildFolder,
|
||||
useYarn
|
||||
);
|
||||
},
|
||||
err => {
|
||||
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
|
||||
if (tscCompileOnError) {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
'Compiled with the following type errors (you may want to check these before deploying your app):\n'
|
||||
)
|
||||
);
|
||||
printBuildError(err);
|
||||
} else {
|
||||
console.log(chalk.red('Failed to compile.\n'));
|
||||
printBuildError(err);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
)
|
||||
.catch(err => {
|
||||
if (err && err.message) {
|
||||
console.log(err.message);
|
||||
}
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
// Create the production build and print the deployment instructions.
|
||||
function build(previousFileSizes) {
|
||||
console.log('Creating an optimized production build...');
|
||||
|
||||
const compiler = webpack(config);
|
||||
return new Promise((resolve, reject) => {
|
||||
compiler.run((err, stats) => {
|
||||
let messages;
|
||||
if (err) {
|
||||
if (!err.message) {
|
||||
return reject(err);
|
||||
}
|
||||
|
||||
let errMessage = err.message;
|
||||
|
||||
// Add additional information for postcss errors
|
||||
if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
|
||||
errMessage +=
|
||||
'\nCompileError: Begins at CSS selector ' +
|
||||
err['postcssNode'].selector;
|
||||
}
|
||||
|
||||
messages = formatWebpackMessages({
|
||||
errors: [errMessage],
|
||||
warnings: [],
|
||||
});
|
||||
} else {
|
||||
messages = formatWebpackMessages(
|
||||
stats.toJson({ all: false, warnings: true, errors: true })
|
||||
);
|
||||
}
|
||||
if (messages.errors.length) {
|
||||
// Only keep the first error. Others are often indicative
|
||||
// of the same problem, but confuse the reader with noise.
|
||||
if (messages.errors.length > 1) {
|
||||
messages.errors.length = 1;
|
||||
}
|
||||
return reject(new Error(messages.errors.join('\n\n')));
|
||||
}
|
||||
if (
|
||||
process.env.CI &&
|
||||
(typeof process.env.CI !== 'string' ||
|
||||
process.env.CI.toLowerCase() !== 'false') &&
|
||||
messages.warnings.length
|
||||
) {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
'\nTreating warnings as errors because process.env.CI = true.\n' +
|
||||
'Most CI servers set it automatically.\n'
|
||||
)
|
||||
);
|
||||
return reject(new Error(messages.warnings.join('\n\n')));
|
||||
}
|
||||
|
||||
const resolveArgs = {
|
||||
stats,
|
||||
previousFileSizes,
|
||||
warnings: messages.warnings,
|
||||
};
|
||||
|
||||
if (writeStatsJson) {
|
||||
return bfj
|
||||
.write(paths.appBuild + '/bundle-stats.json', stats.toJson())
|
||||
.then(() => resolve(resolveArgs))
|
||||
.catch(error => reject(new Error(error)));
|
||||
}
|
||||
|
||||
return resolve(resolveArgs);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function copyPublicFolder() {
|
||||
fs.copySync(paths.appPublic, paths.appBuild, {
|
||||
dereference: true,
|
||||
filter: file => file !== paths.appHtml,
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'development';
|
||||
process.env.NODE_ENV = 'development';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('../config/env');
|
||||
|
||||
|
||||
const fs = require('fs');
|
||||
const chalk = require('react-dev-utils/chalk');
|
||||
const webpack = require('webpack');
|
||||
const WebpackDevServer = require('webpack-dev-server');
|
||||
const clearConsole = require('react-dev-utils/clearConsole');
|
||||
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||
const {
|
||||
choosePort,
|
||||
createCompiler,
|
||||
prepareProxy,
|
||||
prepareUrls,
|
||||
} = require('react-dev-utils/WebpackDevServerUtils');
|
||||
const openBrowser = require('react-dev-utils/openBrowser');
|
||||
const semver = require('semver');
|
||||
const paths = require('../config/paths');
|
||||
const configFactory = require('../config/webpack.config');
|
||||
const createDevServerConfig = require('../config/webpackDevServer.config');
|
||||
const getClientEnvironment = require('../config/env');
|
||||
const react = require(require.resolve('react', { paths: [paths.appPath] }));
|
||||
|
||||
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
|
||||
const useYarn = fs.existsSync(paths.yarnLockFile);
|
||||
const isInteractive = process.stdout.isTTY;
|
||||
|
||||
// Warn and crash if required files are missing
|
||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Tools like Cloud9 rely on this.
|
||||
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 4200;
|
||||
const HOST = process.env.HOST || '0.0.0.0';
|
||||
|
||||
if (process.env.HOST) {
|
||||
console.log(
|
||||
chalk.cyan(
|
||||
`Attempting to bind to HOST environment variable: ${chalk.yellow(
|
||||
chalk.bold(process.env.HOST)
|
||||
)}`
|
||||
)
|
||||
);
|
||||
console.log(
|
||||
`If this was unintentional, check that you haven't mistakenly set it in your shell.`
|
||||
);
|
||||
console.log(
|
||||
`Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
|
||||
);
|
||||
console.log();
|
||||
}
|
||||
|
||||
// We require that you explicitly set browsers and do not fall back to
|
||||
// browserslist defaults.
|
||||
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
|
||||
checkBrowsers(paths.appPath, isInteractive)
|
||||
.then(() => {
|
||||
// We attempt to use the default port but if it is busy, we offer the user to
|
||||
// run on a different port. `choosePort()` Promise resolves to the next free port.
|
||||
return choosePort(HOST, DEFAULT_PORT);
|
||||
})
|
||||
.then(port => {
|
||||
if (port == null) {
|
||||
// We have not found a port.
|
||||
return;
|
||||
}
|
||||
|
||||
const config = configFactory('development');
|
||||
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
|
||||
const appName = require(paths.appPackageJson).name;
|
||||
|
||||
const useTypeScript = fs.existsSync(paths.appTsConfig);
|
||||
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
|
||||
const urls = prepareUrls(
|
||||
protocol,
|
||||
HOST,
|
||||
port,
|
||||
paths.publicUrlOrPath.slice(0, -1)
|
||||
);
|
||||
const devSocket = {
|
||||
warnings: warnings =>
|
||||
devServer.sockWrite(devServer.sockets, 'warnings', warnings),
|
||||
errors: errors =>
|
||||
devServer.sockWrite(devServer.sockets, 'errors', errors),
|
||||
};
|
||||
// Create a webpack compiler that is configured with custom messages.
|
||||
const compiler = createCompiler({
|
||||
appName,
|
||||
config,
|
||||
devSocket,
|
||||
urls,
|
||||
useYarn,
|
||||
useTypeScript,
|
||||
tscCompileOnError,
|
||||
webpack,
|
||||
});
|
||||
// Load proxy config
|
||||
const proxySetting = require(paths.appPackageJson).proxy;
|
||||
const proxyConfig = prepareProxy(
|
||||
proxySetting,
|
||||
paths.appPublic,
|
||||
paths.publicUrlOrPath
|
||||
);
|
||||
// Serve webpack assets generated by the compiler over a web server.
|
||||
const serverConfig = createDevServerConfig(
|
||||
proxyConfig,
|
||||
urls.lanUrlForConfig
|
||||
);
|
||||
const devServer = new WebpackDevServer(compiler, serverConfig);
|
||||
// Launch WebpackDevServer.
|
||||
devServer.listen(port, HOST, err => {
|
||||
if (err) {
|
||||
return console.log(err);
|
||||
}
|
||||
if (isInteractive) {
|
||||
clearConsole();
|
||||
}
|
||||
|
||||
if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
`Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
console.log(chalk.cyan('Starting the development server...\n'));
|
||||
openBrowser(urls.localUrlForBrowser);
|
||||
});
|
||||
|
||||
['SIGINT', 'SIGTERM'].forEach(function (sig) {
|
||||
process.on(sig, function () {
|
||||
devServer.close();
|
||||
process.exit();
|
||||
});
|
||||
});
|
||||
|
||||
if (process.env.CI !== 'true') {
|
||||
// Gracefully exit when stdin ends
|
||||
process.stdin.on('end', function () {
|
||||
devServer.close();
|
||||
process.exit();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
if (err && err.message) {
|
||||
console.log(err.message);
|
||||
}
|
||||
process.exit(1);
|
||||
});
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'test';
|
||||
process.env.NODE_ENV = 'test';
|
||||
process.env.PUBLIC_URL = '';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('../config/env');
|
||||
|
||||
|
||||
const jest = require('jest');
|
||||
const execSync = require('child_process').execSync;
|
||||
let argv = process.argv.slice(2);
|
||||
|
||||
function isInGitRepository() {
|
||||
try {
|
||||
execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function isInMercurialRepository() {
|
||||
try {
|
||||
execSync('hg --cwd . root', { stdio: 'ignore' });
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Watch unless on CI or explicitly running all tests
|
||||
if (
|
||||
!process.env.CI &&
|
||||
argv.indexOf('--watchAll') === -1 &&
|
||||
argv.indexOf('--watchAll=false') === -1
|
||||
) {
|
||||
// https://github.com/facebook/create-react-app/issues/5210
|
||||
const hasSourceControl = isInGitRepository() || isInMercurialRepository();
|
||||
argv.push(hasSourceControl ? '--watch' : '--watchAll');
|
||||
}
|
||||
|
||||
|
||||
jest.run(argv);
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { HeaderContent } from './types';
|
||||
|
||||
class Header {
|
||||
public header: HeaderContent;
|
||||
|
||||
constructor() {
|
||||
this.header = {};
|
||||
}
|
||||
|
||||
updateToken(token: string): void {
|
||||
this.header = {
|
||||
...this.header,
|
||||
Authorization: `Bearer ${token}`,
|
||||
};
|
||||
}
|
||||
|
||||
removeToken(): void {
|
||||
if ('Authorization' in this.header) {
|
||||
delete this.header.Authorization;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import axios, { AxiosInstance } from 'axios';
|
||||
|
||||
export const createAxios = ({ host }: { host: string }): AxiosInstance => axios.create({
|
||||
baseURL: host,
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface HeaderContent {
|
||||
Authorization?: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import { AxiosInstance } from 'axios';
|
||||
import { getIsJwtToken, getIsJwtTokenExpire } from '@Tools/utility';
|
||||
import Header from './_APITool/Header';
|
||||
import { createAxios } from './_APITool';
|
||||
import { CreatUserAPI } from './user-apis';
|
||||
import { UserAPIProps } from './user-apis/types';
|
||||
import { APIParams } from './types';
|
||||
|
||||
class API {
|
||||
private axios: AxiosInstance;
|
||||
|
||||
public baseHeader: Header;
|
||||
|
||||
public baseToken: string;
|
||||
|
||||
public user: UserAPIProps;
|
||||
|
||||
constructor({ host }: APIParams) {
|
||||
this.axios = createAxios({ host });
|
||||
this.baseHeader = new Header();
|
||||
this.baseToken = '';
|
||||
this.user = CreatUserAPI({ axios: this.axios, header: this.baseHeader });
|
||||
}
|
||||
|
||||
updateAccessToken = (token: string): void => {
|
||||
this.baseHeader.updateToken(token);
|
||||
this.baseToken = token;
|
||||
};
|
||||
|
||||
removeAccessToken = (): void => {
|
||||
this.baseHeader.removeToken();
|
||||
this.baseToken = '';
|
||||
};
|
||||
|
||||
checkAccessTokenValid = async (): Promise<boolean> => {
|
||||
const isJwtToken = await getIsJwtToken(this.baseToken);
|
||||
return isJwtToken;
|
||||
};
|
||||
|
||||
checkAccessTokenExpired = async (expiredTime = 0): Promise<boolean> => {
|
||||
const isJwtToken = await this.checkAccessTokenValid();
|
||||
if (isJwtToken) {
|
||||
return getIsJwtTokenExpire(this.baseToken, expiredTime);
|
||||
}
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
export default API;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface APIParams {
|
||||
host: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import { AxiosInstance } from 'axios';
|
||||
import Header from '../_APITool/Header';
|
||||
import {
|
||||
UserAPIProps,
|
||||
PostUserRefreshAPIPromise,
|
||||
GetUserSingleSignInAPIPromise,
|
||||
GetUserAccountInfoAPIPromise,
|
||||
PostUserSignOutAPIPromise,
|
||||
} from './types';
|
||||
|
||||
export function CreatUserAPI({ axios, header }: { axios: AxiosInstance; header: Header }): UserAPIProps {
|
||||
return {
|
||||
getUserSSO: async (backUrl: string): Promise<GetUserSingleSignInAPIPromise> => {
|
||||
try {
|
||||
const res = await axios.get('/account/login/sso', {
|
||||
params: {
|
||||
back_url: backUrl,
|
||||
},
|
||||
});
|
||||
return res.data;
|
||||
} catch (error) {
|
||||
const errorMessage = {
|
||||
url: '',
|
||||
error: error.response?.data,
|
||||
} as GetUserSingleSignInAPIPromise;
|
||||
return errorMessage;
|
||||
}
|
||||
},
|
||||
postUserRefreshToken: async (): Promise<PostUserRefreshAPIPromise> => {
|
||||
try {
|
||||
const res = await axios.post('/account/refresh_token', undefined, {
|
||||
headers: { ...header.header },
|
||||
});
|
||||
return res.data;
|
||||
} catch (error) {
|
||||
const errorMessage = {
|
||||
token: '',
|
||||
error: error.response?.data,
|
||||
};
|
||||
return errorMessage;
|
||||
}
|
||||
},
|
||||
getUserAccountInfo: async (): Promise<GetUserAccountInfoAPIPromise> => {
|
||||
try {
|
||||
const res = await axios.get('/account', {
|
||||
headers: { ...header.header },
|
||||
});
|
||||
return res.data;
|
||||
} catch (error) {
|
||||
const errorMessage = {
|
||||
account: {
|
||||
_id: '',
|
||||
username: '',
|
||||
email: '',
|
||||
display_name: '',
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
error: error.response?.data,
|
||||
},
|
||||
};
|
||||
return errorMessage;
|
||||
}
|
||||
},
|
||||
postUserSignOut: async (): Promise<PostUserSignOutAPIPromise> => {
|
||||
try {
|
||||
const res = await axios.post('/account/logout', undefined, {
|
||||
headers: { ...header.header },
|
||||
});
|
||||
return res.data;
|
||||
} catch (error) {
|
||||
const errorMessage = {
|
||||
url: '',
|
||||
error: error.response?.data,
|
||||
};
|
||||
return errorMessage;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { APIError } from '@Models/GeneralTypes';
|
||||
import {
|
||||
UserTokenInfo,
|
||||
UserSignInInfo,
|
||||
UserOAuthUrl,
|
||||
UserSignOutUrl,
|
||||
} from '@Models/Redux/User/types';
|
||||
|
||||
export interface GetUserSingleSignInAPIPromise extends UserOAuthUrl {
|
||||
error?: APIError;
|
||||
}
|
||||
export interface PostUserRefreshAPIPromise extends UserTokenInfo {
|
||||
error?: APIError;
|
||||
}
|
||||
export interface GetUserAccountInfoAPIPromise extends UserSignInInfo {
|
||||
error?: APIError;
|
||||
}
|
||||
export interface PostUserSignOutAPIPromise extends UserSignOutUrl {
|
||||
error?: APIError;
|
||||
}
|
||||
|
||||
export interface UserAPIProps {
|
||||
getUserSSO: (backUrl: string) => Promise<GetUserSingleSignInAPIPromise>;
|
||||
postUserRefreshToken: () => Promise<PostUserRefreshAPIPromise>;
|
||||
getUserAccountInfo: () => Promise<GetUserAccountInfoAPIPromise>;
|
||||
postUserSignOut: () => Promise<PostUserSignOutAPIPromise>;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.1s"></animateTransform>
|
||||
<circle cx="50" cy="50" r="39.891" stroke="#6994b7" stroke-width="14.4" fill="none" stroke-dasharray="0 300">
|
||||
<animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.046s"></animate>
|
||||
</circle>
|
||||
<circle cx="50" cy="50" r="39.891" stroke="#eeeeee" stroke-width="7.2" fill="none" stroke-dasharray="0 300">
|
||||
<animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.046s"></animate>
|
||||
</circle>
|
||||
<circle cx="50" cy="50" r="32.771" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
|
||||
<animate attributeName="stroke-dasharray" values="15 300;45.299378454348094 300;15 300" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.046s"></animate>
|
||||
</circle>
|
||||
<circle cx="50" cy="50" r="47.171" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
|
||||
<animate attributeName="stroke-dasharray" values="15 300;66.03388996804073 300;15 300" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.046s"></animate>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1"></animateTransform>
|
||||
<path fill="#6994b7" stroke="#000000" d="M97.2,50.1c0,6.1-1.2,12.2-3.5,17.9l-13.3-5.4c1.6-3.9,2.4-8.2,2.4-12.4"></path>
|
||||
<path fill="#eeeeee" d="M93.5,49.9c0,1.2,0,2.7-0.1,3.9l-0.4,3.6c-0.4,2-2.3,3.3-4.1,2.8l-0.2-0.1c-1.8-0.5-3.1-2.3-2.7-3.9l0.4-3 c0.1-1,0.1-2.3,0.1-3.3"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M85.4,62.7c-0.2,0.7-0.5,1.4-0.8,2.1c-0.3,0.7-0.6,1.4-0.9,2c-0.6,1.1-2,1.4-3.2,0.8c-1.1-0.7-1.7-2-1.2-2.9 c0.3-0.6,0.5-1.2,0.8-1.8c0.2-0.6,0.6-1.2,0.7-1.8"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M94.5,65.8c-0.3,0.9-0.7,1.7-1,2.6c-0.4,0.9-0.7,1.7-1.1,2.5c-0.7,1.4-2.3,1.9-3.4,1.3h0 c-1.1-0.7-1.5-2.2-0.9-3.4c0.4-0.8,0.7-1.5,1-2.3c0.3-0.8,0.7-1.5,0.9-2.3"></path>
|
||||
</g>
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.1s"></animateTransform>
|
||||
<path fill="#eeeeee" stroke="#000000" d="M86.9,35.3l-6,2.4c-0.4-1.2-1.1-2.4-1.7-3.5c-0.2-0.5,0.3-1.1,0.9-1C82.3,33.8,84.8,34.4,86.9,35.3z"></path>
|
||||
<path fill="#eeeeee" stroke="#000000" d="M87.1,35.3l6-2.4c-0.6-1.7-1.5-3.3-2.3-4.9c-0.3-0.7-1.2-0.6-1.4,0.1C88.8,30.6,88.2,33,87.1,35.3z"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M82.8,50.1c0-3.4-0.5-6.8-1.6-10c-0.2-0.8-0.4-1.5-0.3-2.3c0.1-0.8,0.4-1.6,0.7-2.4c0.7-1.5,1.9-3.1,3.7-4l0,0 c1.8-0.9,3.7-1.1,5.6-0.3c0.9,0.4,1.7,1,2.4,1.8c0.7,0.8,1.3,1.7,1.7,2.8c1.5,4.6,2.2,9.5,2.3,14.4"></path>
|
||||
<path fill="#eeeeee" d="M86.3,50.2l0-0.9l-0.1-0.9l-0.1-1.9c0-0.9,0.2-1.7,0.7-2.3c0.5-0.7,1.3-1.2,2.3-1.4l0.3,0 c0.9-0.2,1.9,0,2.6,0.6c0.7,0.5,1.3,1.4,1.4,2.4l0.2,2.2l0.1,1.1l0,1.1"></path>
|
||||
<path fill="#ff9922" d="M93.2,34.6c0.1,0.4-0.3,0.8-0.9,1c-0.6,0.2-1.2,0.1-1.4-0.2c-0.1-0.3,0.3-0.8,0.9-1 C92.4,34.2,93,34.3,93.2,34.6z"></path>
|
||||
<path fill="#ff9922" d="M81.9,38.7c0.1,0.3,0.7,0.3,1.3,0.1c0.6-0.2,1-0.6,0.9-0.9c-0.1-0.3-0.7-0.3-1.3-0.1 C82.2,38,81.8,38.4,81.9,38.7z"></path>
|
||||
<path fill="#000000" d="M88.5,36.8c0.1,0.3-0.2,0.7-0.6,0.8c-0.5,0.2-0.9,0-1.1-0.3c-0.1-0.3,0.2-0.7,0.6-0.8C87.9,36.3,88.4,36.4,88.5,36.8z"></path>
|
||||
<path stroke="#000000" d="M85.9,38.9c0.2,0.6,0.8,0.9,1.4,0.7c0.6-0.2,0.9-0.9,0.6-2.1c0.3,1.2,1,1.7,1.6,1.5c0.6-0.2,0.9-0.8,0.8-1.4"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M86.8,42.3l0.4,2.2c0.1,0.4,0.1,0.7,0.2,1.1l0.1,1.1c0.1,1.2-0.9,2.3-2.2,2.3c-1.3,0-2.5-0.8-2.5-1.9l-0.1-1 c0-0.3-0.1-0.6-0.2-1l-0.3-1.9"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M96.2,40.3l0.5,2.7c0.1,0.5,0.2,0.9,0.2,1.4l0.1,1.4c0.1,1.5-0.9,2.8-2.2,2.9h0c-1.3,0-2.5-1.1-2.6-2.4 L92.1,45c0-0.4-0.1-0.8-0.2-1.2l-0.4-2.5"></path>
|
||||
<path fill="#000000" d="M91.1,34.1c0.3,0.7,0,1.4-0.7,1.6c-0.6,0.2-1.3-0.1-1.6-0.7c-0.2-0.6,0-1.4,0.7-1.6C90.1,33.1,90.8,33.5,91.1,34.1z"></path>
|
||||
<path fill="#000000" d="M85.5,36.3c0.2,0.6-0.1,1.2-0.7,1.5c-0.6,0.2-1.3,0-1.5-0.6C83,36.7,83.4,36,84,35.8C84.6,35.5,85.3,35.7,85.5,36.3z"></path>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="#d0021b" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 197 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="#393939" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 197 B |
|
|
@ -0,0 +1 @@
|
|||
export const ENTER_KEY_CODE = 13;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import BASE_URL from '../url';
|
||||
import { RouteObject } from './types';
|
||||
|
||||
const ADMIN_URL = BASE_URL.ADMIN;
|
||||
|
||||
const Admin: RouteObject = {
|
||||
main: [
|
||||
{
|
||||
name: 'Home',
|
||||
route: ADMIN_URL.ROOT_PAGE_HOME,
|
||||
lang: 'frontend.global.property.routehome',
|
||||
component: import('@Components/Pages/Home'),
|
||||
exact: false,
|
||||
subRoute: [
|
||||
{
|
||||
name: 'Home',
|
||||
route: `${ADMIN_URL.PAGE_HOME_OVERVIEW}`,
|
||||
lang: '',
|
||||
component: import('@Components/Pages/Home'),
|
||||
exact: false,
|
||||
subRoute: [],
|
||||
avatar: '',
|
||||
avatarActive: '',
|
||||
},
|
||||
],
|
||||
avatar: 'route/disactive/home.svg',
|
||||
avatarActive: 'route/active/home.svg',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default Admin;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import BASE_URL from '../url';
|
||||
import { RouteObject } from './types';
|
||||
|
||||
const GUEST_URL = BASE_URL.GUEST;
|
||||
|
||||
const Guest: RouteObject = {
|
||||
registration: [
|
||||
{
|
||||
name: 'SignIn',
|
||||
route: `${GUEST_URL.BASE_PAGE_SIGN_IN}`,
|
||||
component: import('@Components/Pages/SignIn'),
|
||||
exact: false,
|
||||
subRoute: [],
|
||||
avatar: '',
|
||||
avatarActive: '',
|
||||
},
|
||||
{
|
||||
name: 'OAuth',
|
||||
route: `${GUEST_URL.BASE_PAGE_OAUTH}`,
|
||||
component: import('@Components/Pages/OAuth'),
|
||||
exact: false,
|
||||
subRoute: [],
|
||||
avatar: '',
|
||||
avatarActive: '',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default Guest;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import Guest from './Guest';
|
||||
import Admin from './Admin';
|
||||
|
||||
export default {
|
||||
Guest,
|
||||
Admin,
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { LazyExoticComponent } from 'react';
|
||||
import { EnvConfig } from '@Env/types';
|
||||
import { ModuleKey } from '@Models/Redux/User/types';
|
||||
|
||||
export { ModuleKey };
|
||||
|
||||
export interface RouteItem {
|
||||
name: string;
|
||||
route: string;
|
||||
lang?: string;
|
||||
component: LazyExoticComponent;
|
||||
subRoute: RouteItem[];
|
||||
exact: boolean;
|
||||
avatar: string;
|
||||
avatarActive: string;
|
||||
permissions?: ModuleKey[];
|
||||
openNewWindow?: boolean;
|
||||
openNewWindowKey?: (keyof EnvConfig)[];
|
||||
}
|
||||
|
||||
export interface RouteObject {
|
||||
[key: string]: RouteItem[];
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const TIMEZONE_TAIPEI = 'Asia/Taipei';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/* 首頁 */
|
||||
export const ROOT_PAGE_HOME = '/home';
|
||||
export const PAGE_HOME_OVERVIEW = '/overview';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* 使用者登入 */
|
||||
export const BASE_PAGE_SIGN_IN = '/login';
|
||||
|
||||
/* 第三方登入 */
|
||||
export const BASE_PAGE_OAUTH = '/oauth_check';
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import * as GUEST from './Guest';
|
||||
import * as ADMIN from './Admin';
|
||||
|
||||
export default {
|
||||
GUEST,
|
||||
ADMIN,
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Component Style */
|
||||
:local(.appContainer) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React, { memo, useMemo } from 'react';
|
||||
import useMappedState from '@Hooks/useMappedState';
|
||||
import MainAppView from '@Components/Layer/MainAppView';
|
||||
import MainAppCheckView from '@Components/Layer/MainAppCheckView';
|
||||
import ModalDialog from '@Components/Common/Modals/ModalDialog';
|
||||
import ModalConfirm from '@Components/Common/Modals/ModalConfirm';
|
||||
import { AppProps } from './types';
|
||||
|
||||
const App: React.FC<AppProps> = ({ Router, routerProps }): React.ReactElement => {
|
||||
/* Global & Local State */
|
||||
const storeUser = useMappedState((state) => state.user);
|
||||
/* Views */
|
||||
const RenderMainView = useMemo(() => {
|
||||
if (storeUser.userAuthCheck) {
|
||||
return <MainAppView />;
|
||||
}
|
||||
return <MainAppCheckView />;
|
||||
}, [storeUser.userAuthCheck]);
|
||||
/* Main */
|
||||
return (
|
||||
<Router {...routerProps}>
|
||||
{RenderMainView}
|
||||
<ModalDialog />
|
||||
<ModalConfirm />
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(App);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouterProps } from 'react-router-dom';
|
||||
import { StaticRouterProps } from 'react-router';
|
||||
|
||||
export interface AppProps {
|
||||
Router: React.ComponentClass<Record<string, unknown>>;
|
||||
routerProps?: BrowserRouterProps | StaticRouterProps;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/* Component Style */
|
||||
:local(.gifLoaderContainer) {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
}
|
||||
:local(.gifLoaderStyle) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React, { memo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { loadImage } from '@Tools/image-loader';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
function GifLoader(): React.ReactElement {
|
||||
/* Main */
|
||||
return (
|
||||
<div className={classNames(Styles.gifLoaderContainer)}>
|
||||
<img className={classNames(Styles.gifLoaderStyle)} alt="dipp-gif-loading" src={loadImage('loading.svg')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(GifLoader);
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import React, {
|
||||
lazy, Suspense, useMemo, useState, useEffect,
|
||||
} from 'react';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import Skeleton from '@material-ui/lab/Skeleton';
|
||||
import Loading from '@Components/Base/Loading';
|
||||
import { Props, ComponentState } from './types';
|
||||
|
||||
const Components: { [key: string]: ComponentState } = {};
|
||||
|
||||
const Lazy: React.FC<Props> = (props): React.ReactElement => {
|
||||
const { componentImport, componentChunkName, componentProps } = props;
|
||||
const [isRender, setIsRender] = useState(false);
|
||||
const RenderComponent = useMemo(() => {
|
||||
const Component = Components[componentChunkName];
|
||||
if (Component) {
|
||||
return <Component {...componentProps} />;
|
||||
}
|
||||
return (
|
||||
<div style={{ width: '100%', height: '100%' }}>
|
||||
<Loading typePosition="relative" typeZIndex={10005} typeIcon="line:fix" isLoading />
|
||||
<Skeleton variant="rect" width="100%" height="100%" animation="wave" />
|
||||
</div>
|
||||
);
|
||||
}, [componentChunkName, isRender, componentProps]);
|
||||
/* Hooks */
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (!Components[componentChunkName]) {
|
||||
Components[componentChunkName] = lazy(async () => {
|
||||
const Element = await componentImport;
|
||||
return Element;
|
||||
});
|
||||
}
|
||||
setIsRender(cloneDeep(!isRender));
|
||||
})();
|
||||
}, [componentChunkName]);
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Suspense fallback={<Loading typePosition="relative" typeZIndex={10005} typeIcon="line:fix" isLoading />}>
|
||||
{RenderComponent}
|
||||
</Suspense>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Lazy;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { ComponentClass, LazyExoticComponent } from 'react';
|
||||
|
||||
export type ComponentState = LazyExoticComponent | null;
|
||||
|
||||
export interface Props {
|
||||
componentImport: Promise<{ default: LazyExoticComponent<ComponentClass> }>;
|
||||
componentChunkName: string;
|
||||
componentProps: { [key: string] };
|
||||
}
|
||||
|
||||
export interface State {
|
||||
Component: ComponentClass;
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
/* General Style */
|
||||
:local(.flexCentral) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@keyframes iconLoadAnim {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes textLoadAnim {
|
||||
to {
|
||||
width: 20px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Component Style */
|
||||
:local(.fullScreenLoadingContainer) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 10000;
|
||||
}
|
||||
:local(.relateScreenLoadingContainer) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
:local(.backgroundBlack) {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
:local(.backgroundWhite) {
|
||||
background: rgb(255, 255, 255, 0.9);
|
||||
}
|
||||
:local(.backgroundBlackImage) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
}
|
||||
:local(.backgroundWhiteImage) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
}
|
||||
:local(.loadingTextWhite) {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #e02020;
|
||||
}
|
||||
:local(.loadingTextBlack) {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
}
|
||||
:local(.loadingAreaContainer){
|
||||
height: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:local(.loadingIconStyle) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
animation: iconLoadAnim 1.2s infinite ease-in-out;
|
||||
}
|
||||
:local(.loadingTextStyle) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
:local(.loadingTextStyle::before){
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
:local(.loadingTextStyle::after) {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
animation: textLoadAnim steps(4, end) 1.2s infinite;
|
||||
content: "\2026";
|
||||
width: 0;
|
||||
}
|
||||
:local(.loadingZIndex) {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import React, { memo, useMemo } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import LinearProgress from '@material-ui/core/LinearProgress';
|
||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import { LoadingProps } from './types';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
function Loading(props: LoadingProps): React.ReactElement {
|
||||
/* Global & Local States */
|
||||
const {
|
||||
typePosition, typeBackground, typeZIndex, typeIcon, isLoading, isHideText, text,
|
||||
} = props;
|
||||
/* Views */
|
||||
const RenderPosition = useMemo(() => {
|
||||
switch (typePosition) {
|
||||
case 'relative':
|
||||
return Styles.relateScreenLoadingContainer;
|
||||
case 'absolute':
|
||||
return Styles.fullScreenLoadingContainer;
|
||||
default:
|
||||
return Styles.fullScreenLoadingContainer;
|
||||
}
|
||||
}, [typePosition]);
|
||||
const RenderBackground = useMemo(() => {
|
||||
switch (typeBackground) {
|
||||
case 'white':
|
||||
return Styles.backgroundWhite;
|
||||
case 'black':
|
||||
return Styles.backgroundBlack;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}, [typeBackground]);
|
||||
const RenderTextColor = useMemo(() => {
|
||||
switch (typeBackground) {
|
||||
case 'white':
|
||||
return Styles.loadingTextWhite;
|
||||
case 'black':
|
||||
return Styles.loadingTextBlack;
|
||||
default:
|
||||
return Styles.loadingTextWhite;
|
||||
}
|
||||
}, [typeBackground]);
|
||||
const RenderText = useMemo(() => {
|
||||
if (isHideText) {
|
||||
return <React.Fragment />;
|
||||
}
|
||||
return <div className={classNames(RenderTextColor, Styles.loadingTextStyle)}>{text}</div>;
|
||||
}, [isHideText, text, typeBackground]);
|
||||
const RenderAnimation = useMemo(() => {
|
||||
switch (typeIcon) {
|
||||
case 'basic':
|
||||
return (
|
||||
<div className={`${Styles.loadingAreaContainer}`}>
|
||||
<CircularProgress size={25} thickness={5} />
|
||||
{RenderText}
|
||||
</div>
|
||||
);
|
||||
case 'text':
|
||||
return <div className={`${Styles.loadingAreaContainer}`}>{RenderText}</div>;
|
||||
case 'icon':
|
||||
return (
|
||||
<div className={`${Styles.loadingAreaContainer}`}>
|
||||
<CircularProgress size={25} thickness={5} />
|
||||
</div>
|
||||
);
|
||||
case 'line:fix':
|
||||
return <LinearProgress />;
|
||||
case 'line:relative':
|
||||
return <LinearProgress />;
|
||||
default:
|
||||
return <React.Fragment />;
|
||||
}
|
||||
}, [typeIcon, isHideText, text]);
|
||||
return (
|
||||
<>
|
||||
{isLoading && (
|
||||
<div
|
||||
className={classNames(RenderPosition, RenderBackground, Styles.flexCentral)}
|
||||
style={{ zIndex: typeZIndex }}
|
||||
>
|
||||
{RenderAnimation}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading.propTypes = {
|
||||
typePosition: PropTypes.string,
|
||||
typeBackground: PropTypes.string,
|
||||
typeZIndex: PropTypes.number,
|
||||
typeIcon: PropTypes.string,
|
||||
isLoading: PropTypes.bool,
|
||||
isHideText: PropTypes.bool,
|
||||
text: PropTypes.string,
|
||||
};
|
||||
Loading.defaultProps = {
|
||||
typePosition: 'relative',
|
||||
typeBackground: '',
|
||||
typeZIndex: 10000,
|
||||
typeIcon: 'line:relative',
|
||||
isLoading: false,
|
||||
isHideText: false,
|
||||
text: '',
|
||||
};
|
||||
|
||||
export default memo(Loading);
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export interface LoadingProps {
|
||||
typePosition: 'relative' | 'absolute';
|
||||
typeBackground: 'white' | 'black';
|
||||
typeZIndex: number;
|
||||
typeIcon: 'basic' | 'text' | 'icon' | 'line:fix' | 'line:relative';
|
||||
isLoading: boolean;
|
||||
isHideText?: boolean;
|
||||
text?: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/* Component Style */
|
||||
:local(.modalContainer) {
|
||||
position: relative;
|
||||
}
|
||||
:local(.modalContainerTitle) {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
}
|
||||
:local(.modalContainerContent) {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
:local(.modalContainerAction) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 18px;
|
||||
position: relative;
|
||||
}
|
||||
:local(.modalContainerActionStyle) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
:local(.modalContainerRemoveIcon) {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
z-index: 1000;
|
||||
}
|
||||
:local(.modalContainerRemoveIconStyle) {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
import React, { memo, useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ClearIcon from '@material-ui/icons/Clear';
|
||||
import ButtonBase from '@material-ui/core/ButtonBase';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Loading from '@Components/Base/Loading';
|
||||
import Styles from './index.module.css';
|
||||
import { ModalProps } from './types';
|
||||
|
||||
function Modal(props: ModalProps): React.ReactElement {
|
||||
/* Global & Local States */
|
||||
const {
|
||||
open,
|
||||
onClose,
|
||||
onConfirm,
|
||||
typeSize,
|
||||
typeIsLoading,
|
||||
disableEscapeKeyDown,
|
||||
disableBackdropClick,
|
||||
disableCancelButton,
|
||||
disableConfirmButton,
|
||||
confirmButtonText,
|
||||
cancelButtonText,
|
||||
tipsText,
|
||||
children,
|
||||
className,
|
||||
mainName,
|
||||
titleClassName,
|
||||
actionClassName,
|
||||
title,
|
||||
closeIcon = true,
|
||||
disabledConfirm,
|
||||
} = props;
|
||||
/* Views */
|
||||
const RenderSize = useMemo(() => {
|
||||
switch (typeSize) {
|
||||
case 'xs':
|
||||
return 'xs';
|
||||
case 'sm':
|
||||
return 'sm';
|
||||
case 'md':
|
||||
return 'md';
|
||||
case 'lg':
|
||||
return 'lg';
|
||||
case 'xl':
|
||||
return 'xl';
|
||||
default:
|
||||
return 'sm';
|
||||
}
|
||||
}, [typeSize]);
|
||||
const RenderCloseIcon = useMemo<React.ReactElement>(() => {
|
||||
if (closeIcon) {
|
||||
return (
|
||||
<ButtonBase className={classNames(Styles.modalContainerRemoveIcon)} onClick={onClose}>
|
||||
<ClearIcon className={classNames(Styles.modalContainerRemoveIconStyle)} fontSize="small" />
|
||||
</ButtonBase>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
}, [open, closeIcon, onClose]);
|
||||
const RenderTitle = useMemo<React.ReactElement>(() => {
|
||||
if (title) {
|
||||
return <div className={classNames(Styles.modalContainerTitle, titleClassName)}>{title}</div>;
|
||||
}
|
||||
return <></>;
|
||||
}, [title]);
|
||||
const RenderIsLoading = useMemo<React.ReactElement>(
|
||||
() => <Loading typePosition="relative" typeZIndex={10003} typeIcon="line:relative" isLoading={typeIsLoading} />,
|
||||
[typeIsLoading],
|
||||
);
|
||||
const RenderCancelButton = useMemo<React.ReactElement>(() => {
|
||||
if (!disableCancelButton) {
|
||||
return (
|
||||
<Button className={classNames(Styles.modalContainerActionStyle)} color="default" onClick={onClose}>
|
||||
{!cancelButtonText ? '取消' : cancelButtonText}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
}, [disableCancelButton, cancelButtonText, onClose]);
|
||||
const RenderConfirmButton = useMemo<React.ReactElement>(() => {
|
||||
if (!disableConfirmButton) {
|
||||
return (
|
||||
<Button
|
||||
className={classNames(Styles.modalContainerActionStyle)}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={onConfirm}
|
||||
disabled={disabledConfirm}
|
||||
>
|
||||
{!confirmButtonText ? '確定' : confirmButtonText}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
}, [disableConfirmButton, confirmButtonText, onConfirm]);
|
||||
const RenderTipsText = useMemo(() => {
|
||||
if (tipsText) {
|
||||
return tipsText;
|
||||
}
|
||||
return <></>;
|
||||
}, [tipsText]);
|
||||
/* Main */
|
||||
return (
|
||||
<Dialog
|
||||
className={classNames(Styles.modalContainer, mainName)}
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
fullWidth
|
||||
maxWidth={RenderSize}
|
||||
disableEnforceFocus
|
||||
disableEscapeKeyDown={disableEscapeKeyDown}
|
||||
disableBackdropClick={disableBackdropClick}
|
||||
>
|
||||
<div className={classNames(className)}>
|
||||
{RenderCloseIcon}
|
||||
{RenderTitle}
|
||||
<div className={classNames(Styles.modalContainerContent)} style={{ marginTop: title ? '18px' : '0px' }}>
|
||||
{children}
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
(!disableCancelButton || !disableConfirmButton) && Styles.modalContainerAction,
|
||||
actionClassName,
|
||||
)}
|
||||
>
|
||||
{RenderTipsText}
|
||||
{RenderCancelButton}
|
||||
{RenderConfirmButton}
|
||||
</div>
|
||||
{RenderIsLoading}
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Modal);
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react';
|
||||
import { MessageSnackObject } from '@Models/Redux/Message/types';
|
||||
|
||||
export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||
|
||||
export interface ModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm?: () => void;
|
||||
typeSize?: ModalSize;
|
||||
typeIsLoading?: boolean;
|
||||
disableEscapeKeyDown?: boolean;
|
||||
disableBackdropClick?: boolean;
|
||||
disableCancelButton?: boolean;
|
||||
disableConfirmButton?: boolean;
|
||||
confirmButtonText?: string;
|
||||
cancelButtonText?: string;
|
||||
tipsText?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
mainName?: string;
|
||||
titleClassName?: string;
|
||||
actionClassName?: string;
|
||||
title?: React.ReactNode;
|
||||
closeIcon?: boolean;
|
||||
disabledConfirm?: boolean;
|
||||
blockLeave?: boolean;
|
||||
blockMessage?: MessageSnackObject;
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/* Component Style */
|
||||
:local(.confirmItemContainer) {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
}
|
||||
:local(.confirmItemTitle) {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
font-weight: bold !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
:local(.confirmItemSubTitle) {
|
||||
width: 100%;
|
||||
min-height: 23px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
:local(.confirmItemTitleStyle) {
|
||||
line-height: 36px !important;
|
||||
}
|
||||
:local(.confirmItemActionContainer) {
|
||||
width: 100%;
|
||||
min-height: 23px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
:local(.confirmItemActionButtonStyle) {
|
||||
margin-left: 15px !important;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import React, { memo, useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import useLang from '@Hooks/useLang';
|
||||
import useMessage from '@Hooks/useMessage';
|
||||
import useMappedState from '@Hooks/useMappedState';
|
||||
import Modal from '@Components/Base/Modal';
|
||||
import { ConfirmItemObject } from './types';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
/* Confirm Item */
|
||||
function ConfirmItem(props: ConfirmItemObject): React.ReactElement {
|
||||
/* Global & Local States */
|
||||
const { i18n } = useLang();
|
||||
const { confirm, requestRemoveConfirm } = props;
|
||||
/* Functions */
|
||||
const onConfirmClick = (): void => {
|
||||
if (confirm.onConfirm) confirm.onConfirm();
|
||||
requestRemoveConfirm();
|
||||
};
|
||||
const onCancelClick = (): void => {
|
||||
if (confirm.onCancel) confirm.onCancel();
|
||||
requestRemoveConfirm();
|
||||
};
|
||||
/* Main */
|
||||
return (
|
||||
<div className={classNames(Styles.confirmItemContainer)}>
|
||||
<div className={classNames(Styles.confirmItemTitle)}>
|
||||
<Typography className={classNames(Styles.confirmItemTitleStyle)} variant="h2" color="textPrimary">
|
||||
{confirm.typeTitle}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classNames(Styles.confirmItemSubTitle)}>
|
||||
<Typography variant="body1" color="textPrimary" style={{ whiteSpace: 'pre-wrap' }}>
|
||||
{confirm.typeContent && confirm.typeContent}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classNames(Styles.confirmItemActionContainer)}>
|
||||
<Button
|
||||
className={classNames(Styles.confirmItemActionButtonStyle)}
|
||||
variant="text"
|
||||
color="default"
|
||||
onClick={onCancelClick}
|
||||
>
|
||||
{confirm.cancelText ? confirm.cancelText : i18n.t('frontend.global.operation.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
className={classNames(Styles.confirmItemActionButtonStyle)}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={onConfirmClick}
|
||||
>
|
||||
{confirm.confirmText ? confirm.confirmText : i18n.t('frontend.global.operation.confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ModalConfirm(): React.ReactElement {
|
||||
/* Global & Local States */
|
||||
const reduxMessage = useMessage();
|
||||
const storeMessage = useMappedState((state) => state.message);
|
||||
/* Functions */
|
||||
const requestRemoveConfirm = (): void => {
|
||||
reduxMessage.removeConfirm();
|
||||
};
|
||||
/* Views */
|
||||
const RenderMessages = useMemo(() => {
|
||||
if (storeMessage.messageConfirmList.list.length > 0) {
|
||||
return (
|
||||
<ConfirmItem confirm={storeMessage.messageConfirmList.list[0]} requestRemoveConfirm={requestRemoveConfirm} />
|
||||
);
|
||||
}
|
||||
return <React.Fragment />;
|
||||
}, [storeMessage.messageConfirmList]);
|
||||
const RenderIsMessageOpen = useMemo(() => {
|
||||
if (storeMessage.messageConfirmList.list.length > 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}, [storeMessage.messageConfirmList]);
|
||||
/* Main */
|
||||
return (
|
||||
<Modal
|
||||
open={RenderIsMessageOpen}
|
||||
onClose={requestRemoveConfirm}
|
||||
typeSize="sm"
|
||||
disableCancelButton
|
||||
disableConfirmButton
|
||||
>
|
||||
{RenderMessages}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(ModalConfirm);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { MessageConfirmObject } from '@Models/Redux/Message/types';
|
||||
|
||||
export interface ConfirmItemObject {
|
||||
confirm: MessageConfirmObject;
|
||||
requestRemoveConfirm: () => void;
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/* Component Style */
|
||||
:local(.dialogItemContainer) {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
}
|
||||
:local(.dialogItemTitle) {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
font-weight: bold !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
:local(.dialogItemSubTitle) {
|
||||
width: 100%;
|
||||
min-height: 23px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
:local(.dialogItemDebug) {
|
||||
width: 100%;
|
||||
min-height: 23px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
:local(.dialogItemTitleStyle) {
|
||||
line-height: 36px !important;
|
||||
}
|
||||
:local(.dialogItemActionContainer) {
|
||||
width: 100%;
|
||||
min-height: 23px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
:local(.dialogItemDebugAction) {
|
||||
left: -7px;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
}
|
||||
:local(.dialogItemActionButtonStyle) {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
/* eslint-disable */
|
||||
import React, { memo, useMemo, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import useLang from '@Hooks/useLang';
|
||||
import useMessage from '@Hooks/useMessage';
|
||||
import useMappedState from '@Hooks/useMappedState';
|
||||
import Modal from '@Components/Base/Modal';
|
||||
import { DialogItemObject } from './types';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
/* Dialog Item */
|
||||
function DialogItem(props: DialogItemObject): React.ReactElement {
|
||||
/* Global & Local States */
|
||||
const { i18n } = useLang();
|
||||
const { dialog, requestRemoveDialog } = props;
|
||||
const [hiddenDebugMessage, setHiddenDebugMessage] = useState(false);
|
||||
/* Functions */
|
||||
const onConfirmClick = (): void => {
|
||||
if (dialog.onConfirm) dialog.onConfirm();
|
||||
requestRemoveDialog();
|
||||
};
|
||||
/* Views */
|
||||
return (
|
||||
<div className={classNames(Styles.dialogItemContainer)}>
|
||||
<div className={classNames(Styles.dialogItemTitle)}>
|
||||
<Typography className={classNames(Styles.dialogItemTitleStyle)} variant="h2" color="textPrimary">
|
||||
{dialog.typeTitle}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classNames(Styles.dialogItemSubTitle)}>
|
||||
<Typography variant="body1" color="textPrimary" style={{ whiteSpace: 'pre-wrap' }}>
|
||||
{dialog.typeContent && dialog.typeContent}
|
||||
</Typography>
|
||||
</div>
|
||||
{dialog.typeHiddenMessage && hiddenDebugMessage && (
|
||||
<div className={classNames(Styles.dialogItemDebug)}>
|
||||
<Typography variant="body2" color="textSecondary" style={{ whiteSpace: 'pre-wrap' }}>
|
||||
{dialog.typeHiddenMessage && dialog.typeHiddenMessage}
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
<div className={classNames(Styles.dialogItemActionContainer)}>
|
||||
{dialog.typeHiddenMessage && (
|
||||
<Button
|
||||
className={classNames(Styles.dialogItemDebugAction)}
|
||||
variant="text"
|
||||
color="primary"
|
||||
onClick={() => setHiddenDebugMessage(!hiddenDebugMessage)}
|
||||
>
|
||||
{hiddenDebugMessage ? i18n.t('frontend.global.operation.debugopenclose') : i18n.t('frontend.global.operation.debugopen')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
className={classNames(Styles.dialogItemActionButtonStyle)}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={onConfirmClick}
|
||||
>
|
||||
{dialog.confirmText ? dialog.confirmText : i18n.t('frontend.global.operation.confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ModalDialog(): React.ReactElement {
|
||||
/* Global & Local States */
|
||||
const reduxMessage = useMessage();
|
||||
const storeMessage = useMappedState(state => state.message);
|
||||
/* Functions */
|
||||
const requestRemoveDialog = (): void => {
|
||||
reduxMessage.removeDialog();
|
||||
};
|
||||
/* Views */
|
||||
const RenderMessages = useMemo(() => {
|
||||
if (storeMessage.messageDialogList.list.length > 0) {
|
||||
return <DialogItem dialog={storeMessage.messageDialogList.list[0]} requestRemoveDialog={requestRemoveDialog} />;
|
||||
}
|
||||
return <React.Fragment />;
|
||||
}, [storeMessage.messageDialogList]);
|
||||
const RenderIsMessageOpen = useMemo(() => {
|
||||
if (storeMessage.messageDialogList.list.length > 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}, [storeMessage.messageDialogList]);
|
||||
/* Main */
|
||||
return (
|
||||
<Modal
|
||||
open={RenderIsMessageOpen}
|
||||
onClose={requestRemoveDialog}
|
||||
typeSize="sm"
|
||||
disableCancelButton
|
||||
disableConfirmButton
|
||||
>
|
||||
{RenderMessages}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(ModalDialog);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { MessageDialogObject } from '@Models/Redux/Message/types';
|
||||
|
||||
export interface DialogItemObject {
|
||||
dialog: MessageDialogObject;
|
||||
requestRemoveDialog: () => void;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, { memo } from 'react';
|
||||
import useMappedRoute from '@Hooks/useMappedRoute';
|
||||
|
||||
function Routes(): React.ReactElement {
|
||||
/* Global & Local State */
|
||||
const routeDom = useMappedRoute([], 'home', 'login');
|
||||
/* Main */
|
||||
return <>{routeDom}</>;
|
||||
}
|
||||
|
||||
export default memo(Routes);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
:local(.appCheckViewContainer) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React, { memo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import useDidMount from '@Hooks/useDidMount';
|
||||
import useReduxApi from '@Hooks/useReduxApi';
|
||||
import GifLoader from '@Components/Base/GifLoader';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
function AppCheckView(): React.ReactElement {
|
||||
/* Global & Local States */
|
||||
const reduxUser = useReduxApi('user');
|
||||
/* Functions */
|
||||
const initialize = (): void => {
|
||||
reduxUser('getUserIsLogin', []);
|
||||
};
|
||||
/* Hooks */
|
||||
useDidMount(() => {
|
||||
initialize();
|
||||
});
|
||||
/* Main */
|
||||
return <div className={classNames(Styles.appCheckViewContainer)}><GifLoader /></div>;
|
||||
}
|
||||
|
||||
export default memo(AppCheckView);
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/* Component Style */
|
||||
:local(.appContainer) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
:local(.appHeader) {
|
||||
width: 100% !important;
|
||||
height: 60px !important;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
z-index: 1300;
|
||||
}
|
||||
:local(.appBody) {
|
||||
width: 100% !important;
|
||||
height: calc(100% - 60px) !important;
|
||||
display: flex;
|
||||
}
|
||||
:local(.appHeart) {
|
||||
width: calc(100% - 230px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
:local(.appSide) {
|
||||
max-width: 230px;
|
||||
position: relative;
|
||||
}
|
||||
:local(.appMain) {
|
||||
flex: 1 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React, { memo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Routes from '@Components/Common/Routes';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
function MainAppView(): React.ReactElement {
|
||||
/* Global & Local State */
|
||||
/* Data */
|
||||
/* Main */
|
||||
return (
|
||||
<div className={classNames(Styles.appContainer)}>
|
||||
<Routes />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(MainAppView);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Component Style */
|
||||
:local(.homeContainer) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { memo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
function Home(): React.ReactElement {
|
||||
/* Global & Local State */
|
||||
/* Main */
|
||||
return <div className={classNames(Styles.homeContainer)}>Home</div>;
|
||||
}
|
||||
export default memo(Home);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/* Component Style */
|
||||
:local(.oAuthContainer) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: white;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import React, { memo } from 'react';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import { Base64 } from 'js-base64';
|
||||
import qs from 'qs';
|
||||
import classNames from 'classnames';
|
||||
import useLang from '@Hooks/useLang';
|
||||
import useMessage from '@Hooks/useMessage';
|
||||
import usaDidMount from '@Hooks/useDidMount';
|
||||
import useReduxApi from '@Hooks/useReduxApi';
|
||||
import Loading from '@Components/Base/Loading';
|
||||
import { UserOAuthResponse, OAuthResult, APIError } from './types';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
function OAuth(): React.ReactElement {
|
||||
/* Global & Local State */
|
||||
const { i18n } = useLang();
|
||||
const reduxMessage = useMessage();
|
||||
const reduxUser = useReduxApi('user');
|
||||
const routeHistory = useHistory();
|
||||
const routeLocation = useLocation();
|
||||
/* Functions */
|
||||
const onOAuthSuccess = (token: string): void => {
|
||||
reduxUser('postUserTokenInfoSignIn', [token]);
|
||||
};
|
||||
const onOAuthFailed = (error: APIError): void => {
|
||||
reduxMessage.error(error);
|
||||
routeHistory.push('/');
|
||||
};
|
||||
const parseQuery = (base64String: string): OAuthResult => {
|
||||
const result = Base64.decode(base64String);
|
||||
const json: OAuthResult = JSON.parse(result);
|
||||
return json;
|
||||
};
|
||||
const validateByType = (query: UserOAuthResponse): void => {
|
||||
if (Object.keys(query).length > 0) {
|
||||
if (query.error) {
|
||||
const parseResult = parseQuery(query.error);
|
||||
const error: APIError = {
|
||||
code: parseResult.code,
|
||||
message: parseResult.message,
|
||||
errorStack: parseResult.errorStack,
|
||||
errorMessage: parseResult.errorMessage,
|
||||
};
|
||||
onOAuthFailed(error);
|
||||
return;
|
||||
}
|
||||
if (query.success) {
|
||||
const parseResult = parseQuery(query.success);
|
||||
onOAuthSuccess(parseResult.token);
|
||||
}
|
||||
}
|
||||
};
|
||||
const initialize = async (): Promise<void> => {
|
||||
const resultQuery: UserOAuthResponse = qs.parse(routeLocation.search, {
|
||||
ignoreQueryPrefix: true,
|
||||
});
|
||||
if (Object.keys(resultQuery).length > 0) {
|
||||
validateByType(resultQuery);
|
||||
} else {
|
||||
routeHistory.push('/');
|
||||
}
|
||||
};
|
||||
/* Hooks */
|
||||
usaDidMount(() => {
|
||||
initialize();
|
||||
});
|
||||
/* Main */
|
||||
return (
|
||||
<div className={classNames(Styles.oAuthContainer)}>
|
||||
<Loading
|
||||
typeIcon="basic"
|
||||
typePosition="absolute"
|
||||
typeBackground="white"
|
||||
isLoading
|
||||
text={i18n.t('frontend.global.property.validate')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default memo(OAuth);
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { APIError } from '@Models/GeneralTypes';
|
||||
import { UserOAuthResponse, UserTokenInfo } from '@Models/Redux/User/types';
|
||||
|
||||
export interface OAuthResult extends UserTokenInfo, APIError {
|
||||
code: number;
|
||||
message: string;
|
||||
errorStack: string;
|
||||
errorMessage: string;
|
||||
}
|
||||
|
||||
export { UserOAuthResponse, UserTokenInfo, APIError };
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
/* Component Style */
|
||||
:local(.signInContainer) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
:local(.signInPanelContainer) {
|
||||
padding: 0px calc(100% / 12) !important;
|
||||
position: relative;
|
||||
}
|
||||
:local(.signInTitleContainer) {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 40px 0px 0px 0px;
|
||||
position: relative;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
:local(.signInFormContainer) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
:local(.signInActionContainer) {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
:local(.signInTipsContainer) {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
:local(.signInLanguageContainer) {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
:local(.signInFormMargin) {
|
||||
width: 100%;
|
||||
margin-bottom: 12px !important;
|
||||
position: relative;
|
||||
}
|
||||
:local(.signInActionButtonStyle) {
|
||||
min-width: 182px !important;
|
||||
margin-right: 23px !important;
|
||||
}
|
||||
:local(.signInActionOrStyle) {
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
:local(.signInLanguageStyle) {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
:local(.signInTitleMainStyle) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:local(.signInTitleSubStyle) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Responsive Style */
|
||||
@media (max-width: 767px) {
|
||||
:local(.signInActionButtonStyle) {
|
||||
width: 100% !important;
|
||||
min-width: 0px !important;
|
||||
margin-bottom: 23px !important;
|
||||
}
|
||||
:local(.signInActionButtonGoogleStyle) {
|
||||
width: 100% !important;
|
||||
min-width: 0px !important;
|
||||
margin-bottom: 23px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import React, { memo, useState, useEffect } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import useLang from '@Hooks/useLang';
|
||||
import useDidMount from '@Hooks/useDidMount';
|
||||
import useReduxApi from '@Hooks/useReduxApi';
|
||||
import useMappedState from '@Hooks/useMappedState';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Loading from '@Components/Base/Loading';
|
||||
import BASE_URL from '@Base/url';
|
||||
import Styles from './index.module.css';
|
||||
|
||||
const GUEST_URL = BASE_URL.GUEST;
|
||||
|
||||
function SignIn(): React.ReactElement {
|
||||
/* Global & Local State */
|
||||
const { i18n } = useLang();
|
||||
const reduxUser = useReduxApi('user');
|
||||
const storeUser = useMappedState((state) => state.user);
|
||||
const storeGlobal = useMappedState((state) => state.global);
|
||||
const [isFirstInitial, setIsFirstInitial] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
/* Functions */
|
||||
const onSubmitSSO = (): void => {
|
||||
const backUrl = `${window.location.origin}${GUEST_URL.BASE_PAGE_OAUTH}`;
|
||||
setIsLoading(true);
|
||||
reduxUser('getUserSSO', [backUrl]);
|
||||
};
|
||||
const initialize = (): void => {
|
||||
if (storeGlobal.globalEnv.env.EnvName === 'prod') {
|
||||
onSubmitSSO();
|
||||
}
|
||||
setIsFirstInitial(true);
|
||||
};
|
||||
/* Hooks */
|
||||
useDidMount(() => {
|
||||
initialize();
|
||||
});
|
||||
useEffect(() => {
|
||||
if (!isFirstInitial) return;
|
||||
setIsLoading(false);
|
||||
}, [storeUser.userAccount]);
|
||||
/* Main */
|
||||
return (
|
||||
<div className={classNames(Styles.signInContainer)}>
|
||||
<div className={classNames(Styles.signInPanelContainer)}>
|
||||
<div className={classNames(Styles.signInTitleContainer)}>
|
||||
<Typography className={classNames(Styles.signInTitleMainStyle)} variant="h4" color="textPrimary">
|
||||
{i18n.t('frontend.local.signin.logintitle')}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classNames(Styles.signInActionContainer)}>
|
||||
<Button
|
||||
className={classNames(Styles.signInActionButtonStyle)}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={onSubmitSSO}
|
||||
>
|
||||
{i18n.t('frontend.global.operation.sso')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Loading typePosition="absolute" typeZIndex={20000} typeIcon="line:fix" isLoading={isLoading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(SignIn);
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
--ck-z-default: 100;
|
||||
--ck-z-modal: calc(var(--ck-z-default) + 999);
|
||||
}
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
td:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
td:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { EnvConfig } from '../types';
|
||||
|
||||
const config: EnvConfig = {
|
||||
EnvName: 'default',
|
||||
EnvShortName: 'l',
|
||||
EnvUrl: '',
|
||||
APIUrl: 'http://localhost:10230',
|
||||
I18nLocalName: 'default-lang',
|
||||
JwtTokenLocalName: 'default-token',
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { EnvConfig } from '../types';
|
||||
|
||||
const config: EnvConfig = {
|
||||
EnvName: 'development',
|
||||
EnvShortName: 'd',
|
||||
EnvUrl: '',
|
||||
APIUrl: 'http://localhost:10230',
|
||||
I18nLocalName: 'development-lang',
|
||||
JwtTokenLocalName: 'development-token',
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
/* eslint-disable no-console */
|
||||
import Default from './Config/Default';
|
||||
import Development from './Config/Development';
|
||||
import { EnvConfig } from './types';
|
||||
|
||||
class Config {
|
||||
constructor() {
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
public env: EnvConfig = Default;
|
||||
|
||||
public replaceCompanyLogo = false;
|
||||
|
||||
initialize(): void {
|
||||
if (process.env.APP_ENV) {
|
||||
this.setEnv(process.env.APP_ENV);
|
||||
}
|
||||
}
|
||||
|
||||
setEnv(env: string): void {
|
||||
switch (env) {
|
||||
case 'dev':
|
||||
this.env = Development;
|
||||
break;
|
||||
default:
|
||||
this.env = Default;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
getEnv(): EnvConfig {
|
||||
return this.env;
|
||||
}
|
||||
|
||||
get HostApiUrl(): string {
|
||||
return `${this.env.APIUrl}/api`;
|
||||
}
|
||||
|
||||
get HostUrl(): string {
|
||||
return this.env.EnvUrl;
|
||||
}
|
||||
|
||||
get TokenLocalStorageName(): string {
|
||||
return this.env.JwtTokenLocalName;
|
||||
}
|
||||
|
||||
get I18nLocalStorageName(): string {
|
||||
return this.env.I18nLocalName;
|
||||
}
|
||||
|
||||
get EnvName(): string {
|
||||
return this.env.EnvName;
|
||||
}
|
||||
}
|
||||
|
||||
export default Config;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export interface EnvConfig {
|
||||
readonly EnvName: string;
|
||||
readonly EnvShortName: string;
|
||||
readonly EnvUrl: string;
|
||||
readonly APIUrl: string;
|
||||
readonly I18nLocalName: string;
|
||||
readonly JwtTokenLocalName: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { useEffect, EffectCallback } from 'react';
|
||||
|
||||
export default function useDidMount(effect: EffectCallback): void {
|
||||
return useEffect(effect, []);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { useDispatch as BaseUseDispatch } from 'react-redux';
|
||||
import { Action, AnyAction } from 'redux';
|
||||
import { ThunkDispatch } from 'redux-thunk';
|
||||
import { StoreState } from '@Reducers/_InitializeStore/types';
|
||||
|
||||
export type UseDispatch<T extends Action = AnyAction> = () => ThunkDispatch<StoreState, Record<string, unknown>, T>;
|
||||
const useDispatch: UseDispatch = BaseUseDispatch;
|
||||
|
||||
export default useDispatch;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { useMemo } from 'react';
|
||||
import I18n from '@Models/Core/I18n';
|
||||
import useMappedState from './useMappedState';
|
||||
|
||||
export interface UseLang {
|
||||
i18n: I18n;
|
||||
}
|
||||
|
||||
/**
|
||||
* 描述 : 取得 翻譯檔 的 Class Instance
|
||||
*/
|
||||
|
||||
export default function useLang(): UseLang {
|
||||
const storeGlobal = useMappedState((state) => state.global);
|
||||
return useMemo(() => ({ i18n: storeGlobal.globalI18n }), [storeGlobal.globalLang]);
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
Route, Redirect, Switch, useRouteMatch,
|
||||
} from 'react-router-dom';
|
||||
import LazyComponent from '@Components/Base/Lazy';
|
||||
import BaseRoutes from '@Base/routes';
|
||||
import { RouteItem } from '@Base/routes/types';
|
||||
import useMappedState from './useMappedState';
|
||||
|
||||
type useMappedRouteProps = React.ReactNode;
|
||||
|
||||
/**
|
||||
* 描述 : 取得某個 Route 底下的 SubRoute
|
||||
*/
|
||||
|
||||
export default function useMappedRoute(
|
||||
routeLayer: string[],
|
||||
signInRedirect = '',
|
||||
noSignInRedirect = '',
|
||||
): useMappedRouteProps {
|
||||
/* Global & Local State */
|
||||
const routeMatch = useRouteMatch();
|
||||
const storeUser = useMappedState((state) => state.user);
|
||||
/* Data */
|
||||
const ReturnRoutes: RouteItem[] = useMemo(() => {
|
||||
let fullRoutes: RouteItem[] = [];
|
||||
let result: RouteItem[] | null = null;
|
||||
let hadResult = false;
|
||||
if (storeUser.userIsLogin) {
|
||||
Object.values(BaseRoutes.Admin).forEach((route) => {
|
||||
fullRoutes = fullRoutes.concat(route);
|
||||
});
|
||||
} else {
|
||||
Object.values(BaseRoutes.Guest).forEach((route) => {
|
||||
fullRoutes = fullRoutes.concat(route);
|
||||
});
|
||||
}
|
||||
if (routeLayer.length === 0) {
|
||||
result = fullRoutes;
|
||||
}
|
||||
for (let i = 0; i < routeLayer.length; i += 1) {
|
||||
if (!hadResult) {
|
||||
const recentRouteObject = fullRoutes.find((route) => route.name === routeLayer[i]);
|
||||
if (recentRouteObject) {
|
||||
result = recentRouteObject.subRoute;
|
||||
hadResult = true;
|
||||
}
|
||||
}
|
||||
if (hadResult && result) {
|
||||
const recentRouteObject = result.find((route) => route.name === routeLayer[i]);
|
||||
if (recentRouteObject) {
|
||||
result = recentRouteObject.subRoute;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
return [];
|
||||
}, [storeUser.userIsLogin]);
|
||||
const ReturnReDirect = useMemo<string>(() => {
|
||||
if (storeUser.userIsLogin) {
|
||||
if (ReturnRoutes.length > 0) {
|
||||
return ReturnRoutes[0].route;
|
||||
}
|
||||
}
|
||||
if (ReturnRoutes.length > 0) {
|
||||
return ReturnRoutes[0].route;
|
||||
}
|
||||
return '/';
|
||||
}, [storeUser.userIsLogin, signInRedirect, noSignInRedirect]);
|
||||
/* View */
|
||||
const RenderRoutes = useMemo(
|
||||
() => (
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path={`${routeMatch.url.replace('/', '') === '' ? '/' : `/${routeMatch.url.replace('/', '')}`}`}
|
||||
render={() => (
|
||||
<Redirect
|
||||
to={`${
|
||||
routeMatch.url.replace('/', '') === '' ? '' : `/${routeMatch.url.replace('/', '')}`
|
||||
}${ReturnReDirect}`}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{ReturnRoutes.map((route) => (
|
||||
<Route
|
||||
key={route.route}
|
||||
exact={route.exact}
|
||||
path={`${routeMatch.path.replace('/', '') === '' ? '' : `/${routeMatch.path.replace('/', '')}`}${
|
||||
route.route
|
||||
}`}
|
||||
render={() => (
|
||||
<LazyComponent
|
||||
componentImport={route.component}
|
||||
componentChunkName={`${route.name}Chunk`}
|
||||
componentProps={{}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
<Redirect
|
||||
to={`${routeMatch.url.replace('/', '') === '' ? '' : `/${routeMatch.url.replace('/', '')}`}${ReturnReDirect}`}
|
||||
/>
|
||||
</Switch>
|
||||
),
|
||||
[storeUser.userIsLogin, routeMatch, ReturnReDirect],
|
||||
);
|
||||
/* Main */
|
||||
return <>{RenderRoutes}</>;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { StoreState } from '@Reducers/_InitializeStore/types';
|
||||
|
||||
/**
|
||||
* 描述 : 取得 Redux 內的值
|
||||
*/
|
||||
|
||||
export default function useMappedState<T>(
|
||||
mapState: (state: StoreState) => T,
|
||||
equalityFn?: (left: T, right: T) => boolean,
|
||||
): T {
|
||||
return useSelector<StoreState, T>(mapState, equalityFn);
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { useMemo } from 'react';
|
||||
import { APIError } from '@Models/GeneralTypes';
|
||||
import {
|
||||
postMessageDialog,
|
||||
postMessageConfirm,
|
||||
removeMessageDialog,
|
||||
removeMessageConfirm,
|
||||
} from '@Reducers/message/actions';
|
||||
import { MessageDialogObject, MessageConfirmObject } from '@Models/Redux/Message/types';
|
||||
import { errorCatch } from '@Reducers/_Capture/errorCapture';
|
||||
import useDispatch from './useDispatch';
|
||||
|
||||
interface useMessageDefine {
|
||||
dialog: (dialog: MessageDialogObject) => void;
|
||||
confirm: (confirm: MessageConfirmObject) => void;
|
||||
removeDialog: () => void;
|
||||
removeConfirm: () => void;
|
||||
error: (error: APIError) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 描述 : 取得 Redux Action 裡面關於 Message 的 Action
|
||||
*/
|
||||
|
||||
export default function useMessage(): useMessageDefine {
|
||||
/* Global & Local State */
|
||||
const dispatch = useDispatch();
|
||||
/* Functions */
|
||||
const apiCallPostMessageDialog = (dialog: MessageDialogObject): void => {
|
||||
dispatch(postMessageDialog(dialog));
|
||||
};
|
||||
const apiCallPostMessageConfirm = (confirm: MessageConfirmObject): void => {
|
||||
dispatch(postMessageConfirm(confirm));
|
||||
};
|
||||
const apiCallRemoveMessageDialog = (): void => {
|
||||
dispatch(removeMessageDialog());
|
||||
};
|
||||
const apiCallRemoveMessageConfirm = (): void => {
|
||||
dispatch(removeMessageConfirm());
|
||||
};
|
||||
const apiCallError = (error): void => {
|
||||
dispatch(errorCatch(error));
|
||||
};
|
||||
/* Main */
|
||||
return useMemo(
|
||||
() => ({
|
||||
dialog: apiCallPostMessageDialog,
|
||||
confirm: apiCallPostMessageConfirm,
|
||||
removeDialog: apiCallRemoveMessageDialog,
|
||||
removeConfirm: apiCallRemoveMessageConfirm,
|
||||
error: apiCallError,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
/* eslint-disable no-console */
|
||||
import { useCallback } from 'react';
|
||||
import { ThunkAction } from 'redux-thunk';
|
||||
import { StoreState } from '@Reducers/_InitializeStore/types';
|
||||
import useDispatch from './useDispatch';
|
||||
|
||||
type useReduxAPICallBack = (action: string, props: Array<unknown>) => void;
|
||||
|
||||
type actionType =
|
||||
| 'user'
|
||||
| 'global'
|
||||
| 'message';
|
||||
|
||||
interface ReduxAction {
|
||||
[key: string]: (...props: Array<unknown>) => ThunkAction<Promise<void>, StoreState, unknown, { type: string }>;
|
||||
}
|
||||
|
||||
interface ReduxActionModule {
|
||||
[key: string]: ReduxAction;
|
||||
}
|
||||
|
||||
const VALID_ACTIONS: actionType[] = [
|
||||
'user',
|
||||
'global',
|
||||
'message',
|
||||
];
|
||||
|
||||
const LOAD_MODULE: ReduxActionModule = {};
|
||||
|
||||
/**
|
||||
* 描述 : 取得指定的 Redux Action
|
||||
*/
|
||||
|
||||
export default function useReduxAPI(actionType: actionType): useReduxAPICallBack {
|
||||
/* Global & Local State */
|
||||
const dispatch = useDispatch();
|
||||
/* Main */
|
||||
return useCallback(
|
||||
(action: string, props: Array<unknown>) => {
|
||||
const isInclude = VALID_ACTIONS.includes(actionType);
|
||||
let reduxType: ReduxAction = {};
|
||||
if (isInclude) {
|
||||
if (LOAD_MODULE[actionType]) {
|
||||
reduxType = LOAD_MODULE[actionType];
|
||||
} else {
|
||||
LOAD_MODULE[actionType] = require(`@Reducers/${actionType}/actions`);
|
||||
reduxType = LOAD_MODULE[actionType];
|
||||
}
|
||||
if (reduxType) {
|
||||
const reduxAction = reduxType[action];
|
||||
if (reduxAction) {
|
||||
dispatch(reduxAction(...props));
|
||||
} else {
|
||||
console.warn(`Can't find the action ::: ${action}`);
|
||||
}
|
||||
} else {
|
||||
console.warn(`Can't load module ::: ${reduxType}`);
|
||||
}
|
||||
} else {
|
||||
console.warn(`Can't find the action type ::: ${actionType}`);
|
||||
}
|
||||
},
|
||||
[actionType],
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import '@CSS/index.css';
|
||||
import '@Plugin/index';
|
||||
|
||||
async function renderMainApp(): Promise<void> {
|
||||
const mainAppProvider = (await import('@Providers/MainAppProvider')).default;
|
||||
const Provider = mainAppProvider({
|
||||
Router: BrowserRouter,
|
||||
appKey: 520,
|
||||
routerProps: {
|
||||
basename: '',
|
||||
},
|
||||
});
|
||||
ReactDOM.render(<Provider />, document.getElementById('root'));
|
||||
}
|
||||
|
||||
renderMainApp();
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
const lang = {};
|
||||
|
||||
export default lang;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
const lang = {
|
||||
'frontend.global.operation.confirm': '確認',
|
||||
'frontend.global.operation.ok': '確定',
|
||||
'frontend.global.operation.cancel': '取消',
|
||||
'frontend.global.operation.signout': '登出',
|
||||
'frontend.global.operation.sso': '單一登入',
|
||||
|
||||
'frontend.global.property.routehome': '首頁',
|
||||
|
||||
'frontend.local.signin.logintitle': 'KeyCloak Demo Server',
|
||||
|
||||
'frontend.global.error.9999': '未知的錯誤',
|
||||
'frontend.global.error.0000': '錯誤',
|
||||
'frontend.global.error.1001': '建立',
|
||||
'frontend.global.error.1002': '已接收',
|
||||
'frontend.global.error.1003': '資料格式錯誤',
|
||||
'frontend.global.error.1004': '尚未登入',
|
||||
'frontend.global.error.1005': '無權限可瀏覽',
|
||||
'frontend.global.error.1006': '查無此資料',
|
||||
'frontend.global.error.1007': '伺服器內部錯誤，請尋求客服的協助',
|
||||
};
|
||||
|
||||
export default lang;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default ['zh-TW', 'en'];
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import Immerable from '@Models/GeneralImmer';
|
||||
import tw from '@Langs/data/tw';
|
||||
import en from '@Langs/data/en';
|
||||
import { LangObject, LangList } from './types';
|
||||
|
||||
const LANGUAGE_BASE_LIST = [
|
||||
{
|
||||
lang: 'frontend.global.language.en',
|
||||
value: 'en',
|
||||
},
|
||||
{
|
||||
lang: 'frontend.global.language.tw',
|
||||
value: 'tw',
|
||||
},
|
||||
];
|
||||
|
||||
class I18n extends Immerable {
|
||||
public lang: string;
|
||||
|
||||
public langDefault: LangObject;
|
||||
|
||||
public langList: LangList;
|
||||
|
||||
public langBase: LangObject;
|
||||
|
||||
constructor(lang: string) {
|
||||
super();
|
||||
this.lang = lang;
|
||||
this.langDefault = en;
|
||||
this.langList = LANGUAGE_BASE_LIST;
|
||||
this.langBase = en;
|
||||
this.switchLanguage(this.lang);
|
||||
}
|
||||
|
||||
t(key: string): string {
|
||||
let text = this.langBase[key];
|
||||
if (!text) {
|
||||
text = this.langDefault[key] || '';
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
switchLanguage(language: string): void {
|
||||
switch (language) {
|
||||
case 'en':
|
||||
this.langBase = en;
|
||||
break;
|
||||
case 'tw':
|
||||
this.langBase = tw;
|
||||
break;
|
||||
default:
|
||||
this.langBase = en;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
getSystemLang = (): string => {
|
||||
const lang = navigator.language.toLowerCase();
|
||||
switch (lang) {
|
||||
case 'en':
|
||||
return 'en';
|
||||
case 'tw':
|
||||
case 'zh-tw':
|
||||
return 'tw';
|
||||
default:
|
||||
return 'en';
|
||||
}
|
||||
};
|
||||
|
||||
get languages(): LangList {
|
||||
return this.langList;
|
||||
}
|
||||
}
|
||||
|
||||
export default I18n;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
export interface LangObject {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
export interface LangListItem {
|
||||
lang: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export type LangList = LangListItem[];
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { immerable } from 'immer';
|
||||
|
||||
export default class Immerable {
|
||||
protected [immerable] = true;
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
export interface Pager {
|
||||
page: number;
|
||||
count: number;
|
||||
total: number;
|
||||
}
|
||||
export interface TimeStamp {
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
export interface Range {
|
||||
max: number;
|
||||
min: number;
|
||||
}
|
||||
export interface Condition {
|
||||
page: number;
|
||||
}
|
||||
export interface Attachment {
|
||||
id: string;
|
||||
name: string;
|
||||
file?: File;
|
||||
old?: boolean;
|
||||
}
|
||||
export interface AttachmentInDB {
|
||||
path: string;
|
||||
filename: string;
|
||||
url: string;
|
||||
file?: File;
|
||||
old?: boolean;
|
||||
}
|
||||
export interface ValidFileFormat {
|
||||
type: string;
|
||||
display: string;
|
||||
}
|
||||
export interface APIError {
|
||||
message: string;
|
||||
code: number;
|
||||
errorStack: string;
|
||||
errorMessage: string;
|
||||
}
|
||||
export type Status = '建立通知' | '不通知' | '重複' | '不適用' | '未查看' | '已查看';
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import Immerable from '@Models/GeneralImmer';
|
||||
import I18n from '@Models/Core/I18n';
|
||||
import { MiddleWareObject, MiddleWareAPI, MiddleWareEnv } from './types';
|
||||
|
||||
class Global extends Immerable {
|
||||
public globalLoading: boolean;
|
||||
|
||||
public globalLang: string;
|
||||
|
||||
public globalSideBar: boolean;
|
||||
|
||||
public globalSideBarStatic: boolean;
|
||||
|
||||
public globalAPI: MiddleWareAPI;
|
||||
|
||||
public globalEnv: MiddleWareEnv;
|
||||
|
||||
public globalI18n: I18n;
|
||||
|
||||
public constructor(middleware: MiddleWareObject) {
|
||||
super();
|
||||
this.globalLoading = false;
|
||||
this.globalLang = 'tw';
|
||||
this.globalSideBar = false;
|
||||
this.globalSideBarStatic = true;
|
||||
this.globalAPI = middleware.api;
|
||||
this.globalEnv = middleware.env;
|
||||
this.globalI18n = new I18n(this.globalLang);
|
||||
}
|
||||
|
||||
public initialize(): void {
|
||||
this.globalLoading = false;
|
||||
}
|
||||
|
||||
public updateGlobalLoading(newGlobalLoading: boolean): void {
|
||||
this.globalLoading = newGlobalLoading;
|
||||
}
|
||||
|
||||
public updateGlobalLang(newGlobalLang: string): void {
|
||||
this.globalLang = newGlobalLang;
|
||||
this.globalI18n.switchLanguage(newGlobalLang);
|
||||
}
|
||||
|
||||
public updateGlobalSideBar(newGlobalSideBarState: boolean): void {
|
||||
this.globalSideBar = newGlobalSideBarState;
|
||||
}
|
||||
|
||||
public updateGlobalSideBarStatic(newGlobalSideBarStatic: boolean): void {
|
||||
this.globalSideBarStatic = newGlobalSideBarStatic;
|
||||
}
|
||||
}
|
||||
|
||||
export default Global;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import API from '@API/index';
|
||||
import Env from '@Env/index';
|
||||
|
||||
import { MiddleWare } from '@Reducers/_initializeMiddleware/types';
|
||||
|
||||
export type MiddleWareObject = MiddleWare;
|
||||
|
||||
export type MiddleWareAPI = API;
|
||||
|
||||
export type MiddleWareEnv = Env;
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import Immerable from '@Models/GeneralImmer';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import {
|
||||
MessageDialogObject,
|
||||
MessageDialogList,
|
||||
MessageConfirmObject,
|
||||
MessageConfirmList,
|
||||
} from './types';
|
||||
|
||||
class Message extends Immerable {
|
||||
public messageDialogList: MessageDialogList;
|
||||
|
||||
public messageConfirmList: MessageConfirmList;
|
||||
|
||||
public constructor() {
|
||||
super();
|
||||
this.messageDialogList = {
|
||||
list: [],
|
||||
};
|
||||
this.messageConfirmList = {
|
||||
list: [],
|
||||
};
|
||||
}
|
||||
|
||||
public initialize(): void {
|
||||
this.messageDialogList = {
|
||||
list: [],
|
||||
};
|
||||
this.messageConfirmList = {
|
||||
list: [],
|
||||
};
|
||||
}
|
||||
|
||||
public updateMessageDialogList(newMessageDialogObject: MessageDialogObject): void {
|
||||
const newCloneMessageDialogObject = cloneDeep(newMessageDialogObject);
|
||||
const newCloneMessageDialogList = cloneDeep(this.messageDialogList);
|
||||
newCloneMessageDialogList.list.push(newCloneMessageDialogObject);
|
||||
this.messageDialogList = newCloneMessageDialogList;
|
||||
}
|
||||
|
||||
public removeMessageDialog(): void {
|
||||
const newCloneMessageDialogList = cloneDeep(this.messageDialogList.list);
|
||||
const newSliceDialogList = newCloneMessageDialogList.slice(1);
|
||||
this.messageDialogList.list = newSliceDialogList;
|
||||
}
|
||||
|
||||
public updateMessageConfirmList(newMessageConfirmObject: MessageConfirmObject): void {
|
||||
const newCloneMessageConfirmObject = cloneDeep(newMessageConfirmObject);
|
||||
const newCloneMessageConfirmList = cloneDeep(this.messageConfirmList);
|
||||
newCloneMessageConfirmList.list.push(newCloneMessageConfirmObject);
|
||||
this.messageConfirmList = newCloneMessageConfirmList;
|
||||
}
|
||||
|
||||
public removeMessageConfirm(): void {
|
||||
const newCloneMessageConfirmList = cloneDeep(this.messageConfirmList.list);
|
||||
const newSliceConfirmList = newCloneMessageConfirmList.slice(1);
|
||||
this.messageConfirmList.list = newSliceConfirmList;
|
||||
}
|
||||
}
|
||||
|
||||
export default Message;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue