commit 7dc01d5480d73261749265059ca1b39ad9d99afe Author: JasonWu Date: Mon Sep 6 18:00:03 2021 +0800 [feat] Initial code diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..7f38748 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +/config +/scripts +/libs +/src/services/Scripts/ElementWorkers/* +/.eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c09e95f --- /dev/null +++ b/.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, + }, +}; diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..44f83c0 --- /dev/null +++ b/.gitattributes @@ -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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..67ba3b3 --- /dev/null +++ b/.gitignore @@ -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* diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..bf6fcfb --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,3 @@ +# Changelog + +## 1.0.0 diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..dd99fe5 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,21 @@ +# BUILD STAGE +FROM node:14.14.0 as build +LABEL maintainer="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"] \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..9844381 --- /dev/null +++ b/README.md @@ -0,0 +1,35 @@ +# keyCloak-Demo-Frontend + +keyCloak Demo 用 Server + +[![Coding Style](https://img.shields.io/badge/Coding%20Style-airbnb-blue)](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) diff --git a/config/alias.js b/config/alias.js new file mode 100644 index 0000000..942c82d --- /dev/null +++ b/config/alias.js @@ -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'), +}; diff --git a/config/env.js b/config/env.js new file mode 100644 index 0000000..bb6c99d --- /dev/null +++ b/config/env.js @@ -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, . + // 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; diff --git a/config/getHttpsConfig.js b/config/getHttpsConfig.js new file mode 100644 index 0000000..013d493 --- /dev/null +++ b/config/getHttpsConfig.js @@ -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; diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js new file mode 100644 index 0000000..8f65114 --- /dev/null +++ b/config/jest/cssTransform.js @@ -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'; + }, +}; diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js new file mode 100644 index 0000000..aab6761 --- /dev/null +++ b/config/jest/fileTransform.js @@ -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};`; + }, +}; diff --git a/config/modules.js b/config/modules.js new file mode 100644 index 0000000..d63e41d --- /dev/null +++ b/config/modules.js @@ -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/(.*)$': '/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(); diff --git a/config/paths.js b/config/paths.js new file mode 100644 index 0000000..59c6d04 --- /dev/null +++ b/config/paths.js @@ -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