IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Applied WP:ModuleFederation best practices

Browse Source
This commit is contained in:
Alexey Safronov 2021-01-26 00:55:46 +03:00
parent 789b547ccf
commit b9ed789746
35 changed files with 1498 additions and 1553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/asc-web-common/src/components/NavMenu/sub-components/header-nav.js
View File

@ -4,6 +4,7 @@ import PropTypes from "prop-types";
import styled from "styled-components";
import NavItem from "./nav-item";
import ProfileActions from "./profile-actions";
import history from "../../../history";
import { useTranslation } from "react-i18next";
import { tablet } from "@appserver/components/src/utils/device";
@ -55,7 +56,7 @@ const HeaderNav = React.memo(
}
}, []);
const onAboutClick = useCallback(() => window.open("/about", "_self"), []);
const onAboutClick = useCallback(() => history.push("/about"), []);
const onLogoutClick = useCallback(() => logout && logout(), [logout]);

2
packages/asc-web-common/src/store/auth/reducer.js
View File

@ -49,7 +49,7 @@ const initialState = {
timezones: [],
utcOffset: "00:00:00",
utcHoursOffset: 0,
defaultPage: "/products/files",
defaultPage: "/", //"/products/files",
homepage: "", //config.homepage,
datePattern: "M/d/yyyy",
datePatternJQ: "00/00/0000",

7
packages/asc-web-common/src/utils/index.js
View File

@ -109,12 +109,7 @@ export { withLayoutSize } from "./withLayoutSize";
export function tryRedirectTo(page) {
if (
page &&
page !== "" &&
page !== "/" &&
window.location &&
window.location.pathname &&
window.location.pathname === page &&
window.location.pathname === page ||
window.location.pathname.indexOf(page) !== -1
) {
return false;

24
products/ASC.Files/Client/package.json
View File

@ -3,23 +3,20 @@
"version": "0.1.0",
"private": "true",
"scripts": {
"start": "webpack-cli serve",
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"build:start": "cd dist && PORT=5008 npx serve",
"start": "webpack-dev-server --mode development",
"start:live": "webpack-dev-server --open --mode development --liveReload",
"docker:build": "docker build . -t files",
"docker:run": "docker run -p 5008:5008 files"
"serve": "serve dist -p 5008",
"clean": "rm -rf dist"
},
"devDependencies": {
"@babel/core": "7.9.6",
"@babel/core": "7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "7.9.4",
"@babel/preset-react": "7.12.10",
"@svgr/webpack": "^5.5.0",
"babel-loader": "8.1.0",
"babel-loader": "8.2.2",
"css-loader": "^3.6.0",
"html-webpack-plugin": "4.5.0",
"i18next": "^19.8.4",
@ -27,14 +24,13 @@
"react-i18next": "^11.7.3",
"source-map-loader": "^1.1.2",
"style-loader": "1.2.1",
"webpack": "5.0.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0"
"webpack": "5.14.0",
"webpack-cli": "4.3.1",
"webpack-dev-server": "3.11.2",
"serve": "11.3.2"
},
"dependencies": {
"@babel/runtime": "^7.12.5",
"@redux-dynostore/core": "^3.1.1",
"@redux-dynostore/react-redux": "^3.1.1",
"attr-accept": "^2.2.2",
"axios": "^0.21.0",
"email-addresses": "^3.1.0",

448
products/ASC.Files/Client/src/App.js
View File

@ -1,233 +1,247 @@
import React, { Suspense } from "react";
import { connect } from "react-redux";
import { Router, Switch, Redirect, Route } from "react-router-dom";
import Home from "./components/pages/Home";
import DocEditor from "./components/pages/DocEditor";
import Settings from "./components/pages/Settings";
import VersionHistory from "./components/pages/VersionHistory";
import { fetchTreeFolders } from "./store/files/actions";
import config from "../package.json";
import { Provider } from "react-redux";
import store from "studio/store";
import Shell from "studio/shell";
import {
store as commonStore,
history,
PrivateRoute,
PublicRoute,
Login,
Error404,
Error520,
Offline,
NavMenu,
Main,
utils,
toastr,
Layout,
regDesktop,
} from "@appserver/common";
import "./custom.scss";
const {
setIsLoaded,
getUser,
getPortalSettings,
getModules,
setCurrentProductId,
setCurrentProductHomePage,
getPortalCultures,
setEncryptionKeys,
getIsEncryptionSupport,
getEncryptionKeys,
getIsAuthenticated,
} = commonStore.auth.actions;
const {
getCurrentUser,
isEncryptionSupport,
isDesktopClient,
getIsLoaded,
} = commonStore.auth.selectors;
const App = () => (
<Provider store={store}>
<Shell />
</Provider>
);
class App extends React.Component {
constructor(props) {
super(props);
export default App;
const pathname = window.location.pathname.toLowerCase();
this.isEditor = pathname.indexOf("doceditor") !== -1;
this.isDesktopInit = false;
}
// import React, { Suspense } from "react";
// import { connect } from "react-redux";
// import { Router, Switch, Redirect, Route } from "react-router-dom";
// import Home from "./components/pages/Home";
// import DocEditor from "./components/pages/DocEditor";
// import Settings from "./components/pages/Settings";
// import VersionHistory from "./components/pages/VersionHistory";
// import { fetchTreeFolders } from "./store/files/actions";
// import config from "../package.json";
componentDidMount() {
const {
setModuleInfo,
getUser,
getPortalSettings,
getModules,
getPortalCultures,
fetchTreeFolders,
setIsLoaded,
getIsEncryptionSupport,
getEncryptionKeys,
isDesktop,
getIsAuthenticated,
} = this.props;
// import {
// store as commonStore,
// history,
// PrivateRoute,
// PublicRoute,
// Login,
// Error404,
// Error520,
// Offline,
// NavMenu,
// Main,
// utils,
// toastr,
// Layout,
// regDesktop,
// } from "@appserver/common";
setModuleInfo();
// const {
// setIsLoaded,
// getUser,
// getPortalSettings,
// getModules,
// setCurrentProductId,
// setCurrentProductHomePage,
// getPortalCultures,
// setEncryptionKeys,
// getIsEncryptionSupport,
// getEncryptionKeys,
// getIsAuthenticated,
// } = commonStore.auth.actions;
// const {
// getCurrentUser,
// isEncryptionSupport,
// isDesktopClient,
// getIsLoaded,
// } = commonStore.auth.selectors;
if (this.isEditor) {
setIsLoaded();
return;
}
// class App extends React.Component {
// constructor(props) {
// super(props);
getIsAuthenticated().then((isAuthenticated) => {
if (!isAuthenticated) {
utils.updateTempContent();
return setIsLoaded();
} else {
utils.updateTempContent(isAuthenticated);
}
// const pathname = window.location.pathname.toLowerCase();
// this.isEditor = pathname.indexOf("doceditor") !== -1;
// this.isDesktopInit = false;
// }
const requests = [getUser()];
if (!this.isEditor) {
requests.push(
getPortalSettings(),
getModules(),
getPortalCultures(),
fetchTreeFolders()
);
if (isDesktop) {
requests.push(getIsEncryptionSupport(), getEncryptionKeys());
}
}
// componentDidMount() {
// const {
// setModuleInfo,
// getUser,
// getPortalSettings,
// getModules,
// getPortalCultures,
// fetchTreeFolders,
// setIsLoaded,
// getIsEncryptionSupport,
// getEncryptionKeys,
// isDesktop,
// getIsAuthenticated,
// } = this.props;
Promise.all(requests)
.then(() => {
if (this.isEditor) return Promise.resolve();
})
.catch((e) => {
toastr.error(e);
})
.finally(() => {
utils.updateTempContent();
setIsLoaded();
});
});
}
// setModuleInfo();
componentDidUpdate(prevProps) {
const {
isAuthenticated,
user,
isEncryption,
encryptionKeys,
setEncryptionKeys,
isLoaded,
} = this.props;
console.log("componentDidUpdate: ", this.props);
if (isAuthenticated && !this.isDesktopInit && isEncryption && isLoaded) {
this.isDesktopInit = true;
regDesktop(
user,
isEncryption,
encryptionKeys,
setEncryptionKeys,
this.isEditor
);
console.log(
"%c%s",
"color: green; font: 1.2em bold;",
"Current keys is: ",
encryptionKeys
);
}
}
// if (this.isEditor) {
// setIsLoaded();
// return;
// }
render() {
const { homepage, isDesktop } = this.props;
console.log(Layout);
// getIsAuthenticated().then((isAuthenticated) => {
// if (!isAuthenticated) {
// utils.updateTempContent();
// return setIsLoaded();
// } else {
// utils.updateTempContent(isAuthenticated);
// }
return navigator.onLine ? (
<Layout>
<Router history={history}>
{!this.isEditor && <NavMenu />}
<Main isDesktop={isDesktop}>
<Suspense fallback={null}>
<Switch>
<Redirect exact from="/" to={`${homepage}`} />
<PrivateRoute
exact
path={`${homepage}/settings/:setting`}
component={Settings}
/>
<Route
exact
path={[
`${homepage}/doceditor`,
`/Products/Files/DocEditor.aspx`,
]}
component={DocEditor}
/>
<PrivateRoute
exact
path={`${homepage}/:fileId/history`}
component={VersionHistory}
/>
<PrivateRoute exact path={homepage} component={Home} />
<PrivateRoute path={`${homepage}/filter`} component={Home} />
<PublicRoute
exact
path={[
"/login",
"/login/error=:error",
"/login/confirmed-email=:confirmedEmail",
]}
component={Login}
/>
<PrivateRoute
exact
path={`/error=:error`}
component={Error520}
/>
<PrivateRoute component={Error404} />
</Switch>
</Suspense>
</Main>
</Router>
</Layout>
) : (
<Offline />
);
}
}
// const requests = [getUser()];
// if (!this.isEditor) {
// requests.push(
// getPortalSettings(),
// getModules(),
// getPortalCultures(),
// fetchTreeFolders()
// );
// if (isDesktop) {
// requests.push(getIsEncryptionSupport(), getEncryptionKeys());
// }
// }
const mapStateToProps = (state) => {
const { settings } = state.auth;
const { homepage } = settings;
return {
homepage: homepage || config.homepage,
user: getCurrentUser(state),
isAuthenticated: state.auth.isAuthenticated,
isLoaded: getIsLoaded(state),
isEncryption: isEncryptionSupport(state),
isDesktop: isDesktopClient(state),
encryptionKeys: settings.encryptionKeys,
};
};
// Promise.all(requests)
// .then(() => {
// if (this.isEditor) return Promise.resolve();
// })
// .catch((e) => {
// toastr.error(e);
// })
// .finally(() => {
// utils.updateTempContent();
// setIsLoaded();
// });
// });
// }
const mapDispatchToProps = (dispatch) => {
return {
getIsAuthenticated: () => getIsAuthenticated(dispatch),
setModuleInfo: () => {
dispatch(setCurrentProductHomePage(config.homepage));
dispatch(setCurrentProductId("e67be73d-f9ae-4ce1-8fec-1880cb518cb4"));
},
getUser: () => getUser(dispatch),
getPortalSettings: () => getPortalSettings(dispatch),
getModules: () => getModules(dispatch),
getPortalCultures: () => getPortalCultures(dispatch),
fetchTreeFolders: () => dispatch(fetchTreeFolders()),
setIsLoaded: () => dispatch(setIsLoaded(true)),
getIsEncryptionSupport: () => getIsEncryptionSupport(dispatch),
getEncryptionKeys: () => getEncryptionKeys(dispatch),
setEncryptionKeys: (keys) => dispatch(setEncryptionKeys(keys)),
};
};
// componentDidUpdate(prevProps) {
// const {
// isAuthenticated,
// user,
// isEncryption,
// encryptionKeys,
// setEncryptionKeys,
// isLoaded,
// } = this.props;
// console.log("componentDidUpdate: ", this.props);
// if (isAuthenticated && !this.isDesktopInit && isEncryption && isLoaded) {
// this.isDesktopInit = true;
// regDesktop(
// user,
// isEncryption,
// encryptionKeys,
// setEncryptionKeys,
// this.isEditor
// );
// console.log(
// "%c%s",
// "color: green; font: 1.2em bold;",
// "Current keys is: ",
// encryptionKeys
// );
// }
// }
export default connect(mapStateToProps, mapDispatchToProps)(App);
// render() {
// const { homepage, isDesktop } = this.props;
// console.log(Layout);
// return navigator.onLine ? (
// <Layout>
// <Router history={history}>
// {!this.isEditor && <NavMenu />}
// <Main isDesktop={isDesktop}>
// <Suspense fallback={null}>
// <Switch>
// <Redirect exact from="/" to={`${homepage}`} />
// <PrivateRoute
// exact
// path={`${homepage}/settings/:setting`}
// component={Settings}
// />
// <Route
// exact
// path={[
// `${homepage}/doceditor`,
// `/Products/Files/DocEditor.aspx`,
// ]}
// component={DocEditor}
// />
// <PrivateRoute
// exact
// path={`${homepage}/:fileId/history`}
// component={VersionHistory}
// />
// <PrivateRoute exact path={homepage} component={Home} />
// <PrivateRoute path={`${homepage}/filter`} component={Home} />
// <PublicRoute
// exact
// path={[
// "/login",
// "/login/error=:error",
// "/login/confirmed-email=:confirmedEmail",
// ]}
// component={Login}
// />
// <PrivateRoute
// exact
// path={`/error=:error`}
// component={Error520}
// />
// <PrivateRoute component={Error404} />
// </Switch>
// </Suspense>
// </Main>
// </Router>
// </Layout>
// ) : (
// <Offline />
// );
// }
// }
// const mapStateToProps = (state) => {
// const { settings } = state.auth;
// const { homepage } = settings;
// return {
// homepage: homepage || config.homepage,
// user: getCurrentUser(state),
// isAuthenticated: state.auth.isAuthenticated,
// isLoaded: getIsLoaded(state),
// isEncryption: isEncryptionSupport(state),
// isDesktop: isDesktopClient(state),
// encryptionKeys: settings.encryptionKeys,
// };
// };
// const mapDispatchToProps = (dispatch) => {
// return {
// getIsAuthenticated: () => getIsAuthenticated(dispatch),
// setModuleInfo: () => {
// dispatch(setCurrentProductHomePage(config.homepage));
// dispatch(setCurrentProductId("e67be73d-f9ae-4ce1-8fec-1880cb518cb4"));
// },
// getUser: () => getUser(dispatch),
// getPortalSettings: () => getPortalSettings(dispatch),
// getModules: () => getModules(dispatch),
// getPortalCultures: () => getPortalCultures(dispatch),
// fetchTreeFolders: () => dispatch(fetchTreeFolders()),
// setIsLoaded: () => dispatch(setIsLoaded(true)),
// getIsEncryptionSupport: () => getIsEncryptionSupport(dispatch),
// getEncryptionKeys: () => getEncryptionKeys(dispatch),
// setEncryptionKeys: (keys) => dispatch(setEncryptionKeys(keys)),
// };
// };
// export default connect(mapStateToProps, mapDispatchToProps)(App);

8
products/ASC.Files/Client/src/FilesContent.jsx → products/ASC.Files/Client/src/Files.jsx
View File

@ -1,11 +1,11 @@
import React, { useEffect } from "react";
import { useStore } from "react-redux";
import dynamic from "@redux-dynostore/react-redux";
import { attachReducer } from "@redux-dynostore/core";
// import { useStore } from "react-redux";
// import dynamic from "@redux-dynostore/react-redux";
// import { attachReducer } from "@redux-dynostore/core";
//import rootReducer from "./store/rootReducer";
//import portalReducer from "./store/portal/reducers";
const FilesContent = (props) => {
const store = useStore();
//const store = useStore();
// useEffect(() => {
// console.log("Store object", store);

13
products/ASC.Files/Client/src/FilesPage.jsx
View File

@ -1,13 +0,0 @@
import { Provider } from "react-redux";
import store from "studio/store";
import Frame from "studio/frame";
import "./custom.scss";
const FilesPage = () => (
<Provider store={store}>
<Frame page="files" />
</Provider>
);
ReactDOM.render(<FilesPage />, document.getElementById("root"));

5
products/ASC.Files/Client/src/bootstrap.js vendored Normal file
View File

@ -0,0 +1,5 @@
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<App />, document.getElementById("root"));

2
products/ASC.Files/Client/src/index.js
View File

@ -1,4 +1,4 @@
import("./FilesPage");
import("./bootstrap");
//import "./wdyr";

34
products/ASC.Files/Client/webpack.config.js
View File

@ -1,13 +1,24 @@
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;
module.exports = {
entry: "./src/index",
mode: "development",
devServer: {
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "dist")],
contentBasePublicPath: "/products/files/",
port: 5008,
historyApiFallback: true,
hot: false,
hotOnly: false,
},
output: {
publicPath: "http://localhost:5008/",
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "auto",
chunkFilename: "[id].[contenthash].js",
},
resolve: {
@ -17,12 +28,6 @@ module.exports = {
},
},
devServer: {
port: 5008,
contentBase: path.join(__dirname, "public"),
contentBasePublicPath: "/products/files/",
},
module: {
rules: [
{
@ -79,10 +84,9 @@ module.exports = {
filename: "remoteEntry.js",
remotes: {
studio: "studio@http://localhost:5001/remoteEntry.js",
files: "files@http://localhost:5008/remoteEntry.js",
},
exposes: {
"./page": "./src/FilesContent.jsx",
"./page": "./src/Files.jsx",
},
shared: {
...deps,
@ -96,7 +100,7 @@ module.exports = {
},
},
}),
new HtmlWebPackPlugin({
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],

26
products/ASC.People/Client/package.json
View File

@ -3,23 +3,20 @@
"version": "0.1.0",
"private": "true",
"scripts": {
"start": "webpack-cli serve",
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"build:start": "cd dist && PORT=5001 npx serve",
"start": "webpack-dev-server --mode development",
"start:live": "webpack-dev-server --open --mode development --liveReload",
"docker:build": "docker build . -t login",
"docker:run": "docker run -p 5001:5001 login"
"serve": "serve dist -p 5002",
"clean": "rm -rf dist"
},
"devDependencies": {
"@babel/core": "7.9.6",
"@babel/core": "7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "7.9.4",
"@babel/preset-react": "7.12.10",
"@svgr/webpack": "^5.5.0",
"babel-loader": "8.1.0",
"babel-loader": "8.2.2",
"css-loader": "^3.6.0",
"html-webpack-plugin": "4.5.0",
"i18next": "^19.8.4",
@ -27,16 +24,13 @@
"react-i18next": "^11.7.3",
"source-map-loader": "^1.1.2",
"style-loader": "1.2.1",
"webpack": "5.0.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0"
"webpack": "5.14.0",
"webpack-cli": "4.3.1",
"webpack-dev-server": "3.11.2",
"serve": "11.3.2"
},
"dependencies": {
"@babel/runtime": "^7.12.5",
"@redux-dynostore/core": "^3.1.1",
"@redux-dynostore/react-redux": "^3.1.1",
"@redux-dynostore/react-redux-subspace": "^3.1.1",
"@redux-dynostore/redux-subspace": "^3.1.1",
"attr-accept": "^2.2.2",
"axios": "^0.21.0",
"email-addresses": "^3.1.0",

362
products/ASC.People/Client/src/App.js
View File

@ -1,186 +1,200 @@
import React, { Suspense } from "react";
import { connect } from "react-redux";
import { Router, Switch, Redirect } from "react-router-dom";
import Home from "./components/pages/Home";
import Profile from "./components/pages/Profile";
import ProfileAction from "./components/pages/ProfileAction";
import GroupAction from "./components/pages/GroupAction";
import Reassign from "./components/pages/Reassign";
import {
history,
PrivateRoute,
PublicRoute,
Login,
Error404,
Error520,
Offline,
utils,
store as commonStore,
NavMenu,
Main,
toastr,
} from "@appserver/common";
import { getFilterByLocation } from "./helpers/converters";
import { fetchGroups, fetchPeople } from "./store/people/actions";
import config from "../package.json";
import { Provider } from "react-redux";
import store from "studio/store";
import Shell from "studio/shell";
const {
setIsLoaded,
getUser,
getPortalSettings,
getModules,
setCurrentProductId,
setCurrentProductHomePage,
getPortalPasswordSettings,
getPortalCultures,
getIsAuthenticated,
} = commonStore.auth.actions;
import "./custom.scss";
/*const Profile = lazy(() => import("./components/pages/Profile"));
const ProfileAction = lazy(() => import("./components/pages/ProfileAction"));
const GroupAction = lazy(() => import("./components/pages/GroupAction"));*/
const App = () => (
<Provider store={store}>
<Shell />
</Provider>
);
class App extends React.Component {
componentDidMount() {
const {
setModuleInfo,
getUser,
getPortalSettings,
getModules,
getPortalPasswordSettings,
getPortalCultures,
fetchGroups,
fetchPeople,
setIsLoaded,
getIsAuthenticated,
} = this.props;
export default App;
setModuleInfo();
getIsAuthenticated().then((isAuthenticated) => {
if (!isAuthenticated) {
utils.updateTempContent();
return setIsLoaded();
} else {
utils.updateTempContent(isAuthenticated);
}
// import React, { Suspense } from "react";
// import { connect } from "react-redux";
// import { Router, Switch, Redirect } from "react-router-dom";
// import Home from "./components/pages/Home";
// import Profile from "./components/pages/Profile";
// import ProfileAction from "./components/pages/ProfileAction";
// import GroupAction from "./components/pages/GroupAction";
// import Reassign from "./components/pages/Reassign";
// import {
// history,
// PrivateRoute,
// PublicRoute,
// Login,
// Error404,
// Error520,
// Offline,
// utils,
// store as commonStore,
// NavMenu,
// Main,
// toastr,
// } from "@appserver/common";
// import { getFilterByLocation } from "./helpers/converters";
// import { fetchGroups, fetchPeople } from "./store/people/actions";
// import config from "../package.json";
const requests = [
getUser(),
getPortalSettings(),
getModules(),
getPortalPasswordSettings(),
getPortalCultures(),
fetchGroups(),
fetchPeople(),
];
// const {
// setIsLoaded,
// getUser,
// getPortalSettings,
// getModules,
// setCurrentProductId,
// setCurrentProductHomePage,
// getPortalPasswordSettings,
// getPortalCultures,
// getIsAuthenticated,
// } = commonStore.auth.actions;
Promise.all(requests)
.catch((e) => {
toastr.error(e);
})
.finally(() => {
utils.updateTempContent();
setIsLoaded();
});
});
}
// /*const Profile = lazy(() => import("./components/pages/Profile"));
// const ProfileAction = lazy(() => import("./components/pages/ProfileAction"));
// const GroupAction = lazy(() => import("./components/pages/GroupAction"));*/
render() {
const { homepage } = this.props;
console.log("People App render", this.props);
return navigator.onLine ? (
<Router history={history}>
<NavMenu />
<Main>
<Suspense fallback={null}>
<Switch>
<Redirect exact from="/" to={`${homepage}`} />
<PrivateRoute
exact
path={`${homepage}/view/:userId`}
component={Profile}
/>
<PrivateRoute
path={`${homepage}/edit/:userId`}
restricted
allowForMe
component={ProfileAction}
/>
<PrivateRoute
path={`${homepage}/create/:type`}
restricted
component={ProfileAction}
/>
<PrivateRoute
path={[
`${homepage}/group/edit/:groupId`,
`${homepage}/group/create`,
]}
restricted
component={GroupAction}
/>
<PrivateRoute
path={`${homepage}/reassign/:userId`}
restricted
component={Reassign}
/>
<PrivateRoute exact path={homepage} component={Home} />
<PrivateRoute path={`${homepage}/filter`} component={Home} />
<PublicRoute
exact
path={[
"/login",
"/login/error=:error",
"/login/confirmed-email=:confirmedEmail",
]}
component={Login}
/>
<PrivateRoute exact path={`/error=:error`} component={Error520} />
<PrivateRoute component={Error404} />
</Switch>
</Suspense>
</Main>
</Router>
) : (
<Offline />
);
}
}
// class App extends React.Component {
// componentDidMount() {
// const {
// setModuleInfo,
// getUser,
// getPortalSettings,
// getModules,
// getPortalPasswordSettings,
// getPortalCultures,
// fetchGroups,
// fetchPeople,
// setIsLoaded,
// getIsAuthenticated,
// } = this.props;
const mapStateToProps = (state) => {
const { settings } = state.auth;
const { homepage } = settings;
return {
homepage: homepage || config.homepage,
};
};
// setModuleInfo();
// getIsAuthenticated().then((isAuthenticated) => {
// if (!isAuthenticated) {
// utils.updateTempContent();
// return setIsLoaded();
// } else {
// utils.updateTempContent(isAuthenticated);
// }
const mapDispatchToProps = (dispatch) => {
return {
getIsAuthenticated: () => getIsAuthenticated(dispatch),
setModuleInfo: () => {
dispatch(setCurrentProductHomePage(config.homepage));
dispatch(setCurrentProductId("f4d98afd-d336-4332-8778-3c6945c81ea0"));
},
getUser: () => getUser(dispatch),
getPortalSettings: () => getPortalSettings(dispatch),
getModules: () => getModules(dispatch),
getPortalPasswordSettings: () => getPortalPasswordSettings(dispatch),
getPortalCultures: () => getPortalCultures(dispatch),
fetchGroups: () => fetchGroups(dispatch),
fetchPeople: () => {
var re = new RegExp(`${config.homepage}((/?)$|/filter)`, "gm");
const match = window.location.pathname.match(re);
// const requests = [
// getUser(),
// getPortalSettings(),
// getModules(),
// getPortalPasswordSettings(),
// getPortalCultures(),
// fetchGroups(),
// fetchPeople(),
// ];
if (match && match.length > 0) {
const newFilter = getFilterByLocation(window.location);
return fetchPeople(newFilter, dispatch);
}
// Promise.all(requests)
// .catch((e) => {
// toastr.error(e);
// })
// .finally(() => {
// utils.updateTempContent();
// setIsLoaded();
// });
// });
// }
return Promise.resolve();
},
setIsLoaded: () => dispatch(setIsLoaded(true)),
};
};
// render() {
// const { homepage } = this.props;
// console.log("People App render", this.props);
// return navigator.onLine ? (
// <Router history={history}>
// <NavMenu />
// <Main>
// <Suspense fallback={null}>
// <Switch>
// <Redirect exact from="/" to={`${homepage}`} />
// <PrivateRoute
// exact
// path={`${homepage}/view/:userId`}
// component={Profile}
// />
// <PrivateRoute
// path={`${homepage}/edit/:userId`}
// restricted
// allowForMe
// component={ProfileAction}
// />
// <PrivateRoute
// path={`${homepage}/create/:type`}
// restricted
// component={ProfileAction}
// />
// <PrivateRoute
// path={[
// `${homepage}/group/edit/:groupId`,
// `${homepage}/group/create`,
// ]}
// restricted
// component={GroupAction}
// />
// <PrivateRoute
// path={`${homepage}/reassign/:userId`}
// restricted
// component={Reassign}
// />
// <PrivateRoute exact path={homepage} component={Home} />
// <PrivateRoute path={`${homepage}/filter`} component={Home} />
// <PublicRoute
// exact
// path={[
// "/login",
// "/login/error=:error",
// "/login/confirmed-email=:confirmedEmail",
// ]}
// component={Login}
// />
// <PrivateRoute exact path={`/error=:error`} component={Error520} />
// <PrivateRoute component={Error404} />
// </Switch>
// </Suspense>
// </Main>
// </Router>
// ) : (
// <Offline />
// );
// }
// }
export default connect(mapStateToProps, mapDispatchToProps)(App);
// const mapStateToProps = (state) => {
// const { settings } = state.auth;
// const { homepage } = settings;
// return {
// homepage: homepage || config.homepage,
// };
// };
// const mapDispatchToProps = (dispatch) => {
// return {
// getIsAuthenticated: () => getIsAuthenticated(dispatch),
// setModuleInfo: () => {
// dispatch(setCurrentProductHomePage(config.homepage));
// dispatch(setCurrentProductId("f4d98afd-d336-4332-8778-3c6945c81ea0"));
// },
// getUser: () => getUser(dispatch),
// getPortalSettings: () => getPortalSettings(dispatch),
// getModules: () => getModules(dispatch),
// getPortalPasswordSettings: () => getPortalPasswordSettings(dispatch),
// getPortalCultures: () => getPortalCultures(dispatch),
// fetchGroups: () => fetchGroups(dispatch),
// fetchPeople: () => {
// var re = new RegExp(`${config.homepage}((/?)$|/filter)`, "gm");
// const match = window.location.pathname.match(re);
// if (match && match.length > 0) {
// const newFilter = getFilterByLocation(window.location);
// return fetchPeople(newFilter, dispatch);
// }
// return Promise.resolve();
// },
// setIsLoaded: () => dispatch(setIsLoaded(true)),
// };
// };
// export default connect(mapStateToProps, mapDispatchToProps)(App);

19
products/ASC.People/Client/src/People.jsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
// import { useStore } from "react-redux";
// import dynamic from "@redux-dynostore/react-redux";
// import { attachReducer } from "@redux-dynostore/core";
//import rootReducer from "./store/rootReducer";
//import portalReducer from "./store/portal/reducers";
const PeopleContent = (props) => {
// const store = useStore();
// useEffect(() => {
// console.log("Store object", store);
// return store.detachReducers(["portal"]);
// }, []);
return <div>PEOPLE PAGE</div>;
};
export default PeopleContent;
//export default dynamic("portal", attachReducer(portalReducer))(PeopleContent);

20
products/ASC.People/Client/src/PeopleContent.jsx
View File

@ -1,20 +0,0 @@
import React, { useEffect } from "react";
import { useStore } from "react-redux";
import dynamic from "@redux-dynostore/react-redux";
import { attachReducer } from "@redux-dynostore/core";
//import rootReducer from "./store/rootReducer";
import portalReducer from "./store/portal/reducers";
const PeopleContent = (props) => {
const store = useStore();
useEffect(() => {
console.log("Store object", store);
return store.detachReducers(["portal"]);
}, []);
return <div>PEOPLE PAGE</div>;
};
//export default PeopleContent;
export default dynamic("portal", attachReducer(portalReducer))(PeopleContent);

13
products/ASC.People/Client/src/PeoplePage.jsx
View File

@ -1,13 +0,0 @@
import { Provider } from "react-redux";
import store from "studio/store";
import Frame from "studio/frame";
import "./custom.scss";
const PeoplePage = () => (
<Provider store={store}>
<Frame page="people" />
</Provider>
);
ReactDOM.render(<PeoplePage />, document.getElementById("root"));

5
products/ASC.People/Client/src/bootstrap.js vendored Normal file
View File

@ -0,0 +1,5 @@
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<App />, document.getElementById("root"));

3
products/ASC.People/Client/src/index.js
View File

@ -1,4 +1,5 @@
import("./PeoplePage");
import("./bootstrap");
// import React from "react";
// import ReactDOM from "react-dom";
// import { Provider } from "react-redux";

35
products/ASC.People/Client/webpack.config.js
View File

@ -1,13 +1,24 @@
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;
module.exports = {
entry: "./src/index",
mode: "development",
devServer: {
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "dist")],
contentBasePublicPath: "/products/people/",
port: 5002,
historyApiFallback: true,
hot: false,
hotOnly: false,
},
output: {
publicPath: "http://localhost:5002",
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "auto",
chunkFilename: "[id].[contenthash].js",
},
resolve: {
@ -16,13 +27,6 @@ module.exports = {
crypto: false,
},
},
devServer: {
port: 5002,
contentBase: path.join(__dirname, "public"),
contentBasePublicPath: "/products/people/",
},
module: {
rules: [
{
@ -79,10 +83,9 @@ module.exports = {
filename: "remoteEntry.js",
remotes: {
studio: "studio@http://localhost:5001/remoteEntry.js",
people: "people@http://localhost:5002/remoteEntry.js",
},
exposes: {
"./page": "./src/PeopleContent.jsx",
"./page": "./src/People.jsx",
},
shared: {
...deps,
@ -96,7 +99,7 @@ module.exports = {
},
},
}),
new HtmlWebPackPlugin({
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],

23
web/ASC.Web.Client/package.json
View File

@ -3,23 +3,20 @@
"version": "0.1.0",
"private": "true",
"scripts": {
"start": "webpack-cli serve",
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"build:start": "cd dist && PORT=5001 npx serve",
"start": "webpack-dev-server --open --mode development",
"start:live": "webpack-dev-server --open --mode development --liveReload",
"docker:build": "docker build . -t login",
"docker:run": "docker run -p 5001:5001 login"
"serve": "serve dist -p 5001",
"clean": "rm -rf dist"
},
"devDependencies": {
"@babel/core": "7.9.6",
"@babel/core": "7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "7.9.4",
"@babel/preset-react": "7.12.10",
"@svgr/webpack": "^5.5.0",
"babel-loader": "8.1.0",
"babel-loader": "8.2.2",
"css-loader": "^3.6.0",
"html-webpack-plugin": "4.5.0",
"i18next": "^19.8.4",
@ -27,13 +24,13 @@
"react-i18next": "^11.7.3",
"source-map-loader": "^1.1.2",
"style-loader": "1.2.1",
"webpack": "5.0.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0"
"webpack": "5.14.0",
"webpack-cli": "4.3.1",
"webpack-dev-server": "3.11.2",
"serve": "11.3.2"
},
"dependencies": {
"@babel/runtime": "^7.12.5",
"@redux-dynostore/core": "^3.1.1",
"attr-accept": "^2.2.2",
"axios": "^0.21.0",
"email-addresses": "^3.1.0",

289
web/ASC.Web.Client/src/App.js
View File

@ -1,149 +1,164 @@
import React, { Suspense, lazy } from "react";
import { Router, Route, Switch } from "react-router-dom";
import { connect } from "react-redux";
// import {
// Login,
// Error404,
// Offline,
// ComingSoon
// } from "@appserver/common";
import CommonStore from "@appserver/common/src/store";
import history from "@appserver/common/src/history";
import PrivateRoute from "@appserver/common/src/components/PrivateRoute";
import PublicRoute from "@appserver/common/src/components/PublicRoute";
import NavMenu from "@appserver/common/src/components/NavMenu";
import Main from "@appserver/common/src/components/Main";
import utils from "@appserver/common/src/utils";
import toastr from "@appserver/common/src/components/Toast/toastr";
import React from "react";
import { Provider } from "react-redux";
import Shell from "./Shell";
import store from "./store/store";
import Home from "./components/pages/Home";
import "./custom.scss";
const About = lazy(() => import("./components/pages/About"));
const Confirm = lazy(() => import("./components/pages/Confirm"));
const Settings = lazy(() => import("./components/pages/Settings"));
const Wizard = lazy(() => import("./components/pages/Wizard"));
const Payments = lazy(() => import("./components/pages/Payments"));
const ThirdPartyResponse = lazy(() => import("./components/pages/ThirdParty"));
const {
setIsLoaded,
getUser,
getPortalSettings,
getModules,
getIsAuthenticated,
} = CommonStore.auth.actions;
const App = () => (
<Provider store={store}>
<Shell />
</Provider>
);
class App extends React.Component {
constructor(props) {
super(props);
export default App;
const pathname = window.location.pathname.toLowerCase();
this.isThirdPartyResponse = pathname.indexOf("thirdparty") !== -1;
}
componentDidMount() {
const {
getPortalSettings,
getUser,
getModules,
setIsLoaded,
getIsAuthenticated,
} = this.props;
// import React, { Suspense, lazy } from "react";
// import { Router, Route, Switch } from "react-router-dom";
// import { connect } from "react-redux";
// // import {
// // Login,
// // Error404,
// // Offline,
// // ComingSoon
// // } from "@appserver/common";
// import CommonStore from "@appserver/common/src/store";
// import history from "@appserver/common/src/history";
// import PrivateRoute from "@appserver/common/src/components/PrivateRoute";
// import PublicRoute from "@appserver/common/src/components/PublicRoute";
// import NavMenu from "@appserver/common/src/components/NavMenu";
// import Main from "@appserver/common/src/components/Main";
// import utils from "@appserver/common/src/utils";
// import toastr from "@appserver/common/src/components/Toast/toastr";
getIsAuthenticated()
.then((isAuthenticated) => {
if (isAuthenticated) utils.updateTempContent(isAuthenticated);
// import Home from "./components/pages/Home";
if (this.isThirdPartyResponse) {
setIsLoaded();
return;
}
// const About = lazy(() => import("./components/pages/About"));
// const Confirm = lazy(() => import("./components/pages/Confirm"));
// const Settings = lazy(() => import("./components/pages/Settings"));
// const Wizard = lazy(() => import("./components/pages/Wizard"));
// const Payments = lazy(() => import("./components/pages/Payments"));
// const ThirdPartyResponse = lazy(() => import("./components/pages/ThirdParty"));
// const {
// setIsLoaded,
// getUser,
// getPortalSettings,
// getModules,
// getIsAuthenticated,
// } = CommonStore.auth.actions;
const requests = [];
if (!isAuthenticated) {
requests.push(getPortalSettings());
} else if (
!window.location.pathname.includes("confirm/EmailActivation")
) {
requests.push(getUser());
requests.push(getPortalSettings());
requests.push(getModules());
}
// class App extends React.Component {
// constructor(props) {
// super(props);
Promise.all(requests)
.catch((e) => {
toastr.error(e);
})
.finally(() => {
utils.updateTempContent();
setIsLoaded();
});
})
.catch((err) => toastr.error(err));
}
// const pathname = window.location.pathname.toLowerCase();
// this.isThirdPartyResponse = pathname.indexOf("thirdparty") !== -1;
// }
// componentDidMount() {
// const {
// getPortalSettings,
// getUser,
// getModules,
// setIsLoaded,
// getIsAuthenticated,
// } = this.props;
render() {
return navigator.onLine ? (
<Router history={history}>
{!this.isThirdPartyResponse && <NavMenu />}
<Main>
<Suspense fallback={null}>
<Switch>
<Route exact path="/wizard" component={Wizard} />
<PublicRoute
exact
path={[
"/login",
"/login/error=:error",
"/login/confirmed-email=:confirmedEmail",
]}
component={Login}
/>
<Route path="/confirm" component={Confirm} />
<PrivateRoute
path={`/thirdparty/:provider`}
component={ThirdPartyResponse}
/>
<PrivateRoute
exact
path={["/", "/error=:error"]}
component={Home}
/>
<PrivateRoute exact path="/about" component={About} />
<PrivateRoute restricted path="/settings" component={Settings} />
<PrivateRoute
exact
path={["/coming-soon"]}
component={ComingSoon}
/>
<PrivateRoute path="/payments" component={Payments} />
<PrivateRoute component={Error404} />
</Switch>
</Suspense>
</Main>
</Router>
) : (
<Offline />
);
}
}
// getIsAuthenticated()
// .then((isAuthenticated) => {
// if (isAuthenticated) utils.updateTempContent(isAuthenticated);
const mapStateToProps = (state) => {
const { modules, isLoaded, settings } = state.auth;
const { organizationName } = settings;
return {
modules,
isLoaded,
organizationName,
};
};
// if (this.isThirdPartyResponse) {
// setIsLoaded();
// return;
// }
const mapDispatchToProps = (dispatch) => {
return {
getIsAuthenticated: () => getIsAuthenticated(dispatch),
getPortalSettings: () => getPortalSettings(dispatch),
getUser: () => getUser(dispatch),
getModules: () => getModules(dispatch),
setIsLoaded: () => dispatch(setIsLoaded(true)),
};
};
// const requests = [];
// if (!isAuthenticated) {
// requests.push(getPortalSettings());
// } else if (
// !window.location.pathname.includes("confirm/EmailActivation")
// ) {
// requests.push(getUser());
// requests.push(getPortalSettings());
// requests.push(getModules());
// }
export default connect(mapStateToProps, mapDispatchToProps)(App);
// Promise.all(requests)
// .catch((e) => {
// toastr.error(e);
// })
// .finally(() => {
// utils.updateTempContent();
// setIsLoaded();
// });
// })
// .catch((err) => toastr.error(err));
// }
// render() {
// return navigator.onLine ? (
// <Router history={history}>
// {!this.isThirdPartyResponse && <NavMenu />}
// <Main>
// <Suspense fallback={null}>
// <Switch>
// <Route exact path="/wizard" component={Wizard} />
// <PublicRoute
// exact
// path={[
// "/login",
// "/login/error=:error",
// "/login/confirmed-email=:confirmedEmail",
// ]}
// component={Login}
// />
// <Route path="/confirm" component={Confirm} />
// <PrivateRoute
// path={`/thirdparty/:provider`}
// component={ThirdPartyResponse}
// />
// <PrivateRoute
// exact
// path={["/", "/error=:error"]}
// component={Home}
// />
// <PrivateRoute exact path="/about" component={About} />
// <PrivateRoute restricted path="/settings" component={Settings} />
// <PrivateRoute
// exact
// path={["/coming-soon"]}
// component={ComingSoon}
// />
// <PrivateRoute path="/payments" component={Payments} />
// <PrivateRoute component={Error404} />
// </Switch>
// </Suspense>
// </Main>
// </Router>
// ) : (
// <Offline />
// );
// }
// }
// const mapStateToProps = (state) => {
// const { modules, isLoaded, settings } = state.auth;
// const { organizationName } = settings;
// return {
// modules,
// isLoaded,
// organizationName,
// };
// };
// const mapDispatchToProps = (dispatch) => {
// return {
// getIsAuthenticated: () => getIsAuthenticated(dispatch),
// getPortalSettings: () => getPortalSettings(dispatch),
// getUser: () => getUser(dispatch),
// getModules: () => getModules(dispatch),
// setIsLoaded: () => dispatch(setIsLoaded(true)),
// };
// };
// export default connect(mapStateToProps, mapDispatchToProps)(App);

15
web/ASC.Web.Client/src/HomePage.jsx
View File

@ -1,15 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import Frame from "./Frame";
import store from "./store/store";
import "./custom.scss";
const HomePage = () => (
<Provider store={store}>
<Frame page="home" />
</Provider>
);
ReactDOM.render(<HomePage />, document.getElementById("root"));

15
web/ASC.Web.Client/src/Frame.jsx → web/ASC.Web.Client/src/Shell.jsx
View File

@ -18,10 +18,11 @@ import {
} from "@appserver/common/src/store/auth/actions";
import { updateTempContent } from "@appserver/common/src/utils";
const Home = React.lazy(() => import("studio/home"));
const Home = React.lazy(() => import("./components/pages/Home"));
const Login = React.lazy(() => import("login/page"));
const People = React.lazy(() => import("people/page"));
const Files = React.lazy(() => import("files/page"));
const About = React.lazy(() => import("./components/pages/About"));
const HomeRoute = () => (
<React.Suspense fallback={null}>
@ -55,7 +56,14 @@ const FilesRoute = () => (
</React.Suspense>
);
const Frame = ({ items = [], page = "home", ...rest }) => {
const AboutRoute = () => (
<React.Suspense fallback={null}>
<ErrorBoundary>
<About />
</ErrorBoundary>
</React.Suspense>
);
const Shell = ({ items = [], page = "home", ...rest }) => {
useEffect(() => {
//utils.removeTempContent();
@ -109,6 +117,7 @@ const Frame = ({ items = [], page = "home", ...rest }) => {
path={["/products/files", "/products/files/filter"]}
component={FilesRoute}
/>
<PrivateRoute path={["/about"]} component={AboutRoute} />
<PublicRoute
exact
path={[
@ -145,4 +154,4 @@ const mapDispatchToProps = (dispatch) => {
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Frame);
export default connect(mapStateToProps, mapDispatchToProps)(Shell);

5
web/ASC.Web.Client/src/bootstrap.js vendored Normal file
View File

@ -0,0 +1,5 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

4
web/ASC.Web.Client/src/components/pages/About/index.js
View File

@ -2,7 +2,7 @@
import Text from "@appserver/components/src/components/text";
import Link from "@appserver/components/src/components/link";
import PageLayout from "@appserver/common/src/components/PageLayout";
import utils from "@appserver/common/src/utils";
import { changeLanguage } from "@appserver/common/src/utils";
import { useTranslation } from "react-i18next";
import version from "../../../../package.json";
import styled from "styled-components";
@ -15,8 +15,6 @@ const i18n = createI18N({
localesPath: "pages/About",
});
const { changeLanguage } = utils;
const BodyStyle = styled.div`
margin-top: 24px;

2
web/ASC.Web.Client/src/index.js
View File

@ -1,4 +1,4 @@
import("./HomePage");
import("./bootstrap");
// import React from "react";
// import ReactDOM from "react-dom";

11
web/ASC.Web.Client/src/store/store.js
View File

@ -1,10 +1,11 @@
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension/logOnlyInProduction";
import dynostore, {
combineReducers,
dynamicReducers,
} from "@redux-dynostore/core";
import { combineReducers } from "redux";
// import dynostore, {
// combineReducers,
// dynamicReducers,
// } from "@redux-dynostore/core";
//import { createReducerManager } from "./reducerManager";
import authReducer from "@appserver/common/src/store/auth/reducer";
@ -32,7 +33,7 @@ const rootReducer = combineReducers({
const store = createStore(
//reducerManager.reduce,
rootReducer,
composeWithDevTools(applyMiddleware(thunk), dynostore(dynamicReducers()))
composeWithDevTools(applyMiddleware(thunk))
);
// Optional: Put the reducer manager on the store so it is easily accessible

41
web/ASC.Web.Client/webpack.config.js
View File

@ -1,15 +1,26 @@
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;
module.exports = {
output: {
publicPath: "http://localhost:5001/",
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module.exports = {
entry: "./src/index",
mode: "development",
devServer: {
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "dist")],
port: 5001,
historyApiFallback: true,
hot: false,
hotOnly: false,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers":
"X-Requested-With, content-type, Authorization",
},
openPage: "http://localhost:8092",
},
resolve: {
extensions: [".jsx", ".js", ".json"],
fallback: {
@ -17,10 +28,9 @@ module.exports = {
},
},
devServer: {
port: 5001,
openPage: "http://localhost:8092",
contentBase: path.join(__dirname, "public"),
output: {
publicPath: "auto",
chunkFilename: "[id].[contenthash].js",
},
module: {
@ -84,8 +94,7 @@ module.exports = {
login: "login@http://localhost:5020/remoteEntry.js",
},
exposes: {
"./home": "./src/components/pages/Home",
"./frame": "./src/Frame",
"./shell": "./src/Shell",
"./store": "./src/store/store",
},
shared: {
@ -100,7 +109,7 @@ module.exports = {
},
},
}),
new HtmlWebPackPlugin({
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],

22
web/ASC.Web.Login/package.json
View File

@ -3,23 +3,20 @@
"version": "0.1.0",
"private": "true",
"scripts": {
"start": "webpack-cli serve",
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"build:start": "cd dist && PORT=8080 npx serve",
"start": "webpack-dev-server --mode development",
"start:live": "webpack-dev-server --open --mode development --liveReload",
"docker:build": "docker build . -t login",
"docker:run": "docker run -p 8080:8080 login"
"serve": "serve dist -p 5020",
"clean": "rm -rf dist"
},
"devDependencies": {
"@babel/core": "7.9.6",
"@babel/core": "7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "7.9.4",
"@babel/preset-react": "7.12.10",
"@svgr/webpack": "^5.5.0",
"babel-loader": "8.1.0",
"babel-loader": "8.2.2",
"css-loader": "^3.6.0",
"html-webpack-plugin": "4.5.0",
"i18next": "^19.8.4",
@ -27,9 +24,10 @@
"react-i18next": "^11.7.3",
"source-map-loader": "^1.1.2",
"style-loader": "1.2.1",
"webpack": "5.0.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0"
"webpack": "5.14.0",
"webpack-cli": "4.3.1",
"webpack-dev-server": "3.11.2",
"serve": "11.3.2"
},
"dependencies": {
"@babel/runtime": "^7.12.5",

14
web/ASC.Web.Login/src/App.js Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import { Provider } from "react-redux";
import store from "studio/store";
import Shell from "studio/shell";
const App = () => {
return (
<Provider store={store}>
<Shell />
</Provider>
);
};
export default App;

0
web/ASC.Web.Login/src/LoginContent.jsx → web/ASC.Web.Login/src/Login.jsx
View File

15
web/ASC.Web.Login/src/LoginPage.jsx
View File

@ -1,15 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "studio/store";
import Frame from "studio/frame";
const LoginPage = () => {
return (
<Provider store={store}>
<Frame page="login" />
</Provider>
);
};
ReactDOM.render(<LoginPage />, document.getElementById("root"));

5
web/ASC.Web.Login/src/bootstrap.js vendored Normal file
View File

@ -0,0 +1,5 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

2
web/ASC.Web.Login/src/index.js
View File

@ -1 +1 @@
import("./LoginPage.jsx");
import("./bootstrap");

34
web/ASC.Web.Login/webpack.config.js
View File

@ -1,13 +1,24 @@
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;
module.exports = {
entry: "./src/index",
mode: "development",
devServer: {
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "dist")],
port: 5020,
historyApiFallback: true,
hot: false,
hotOnly: false,
},
output: {
publicPath: "http://localhost:5020/",
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "auto",
chunkFilename: "[id].[contenthash].js",
},
resolve: {
@ -17,12 +28,6 @@ module.exports = {
},
},
devServer: {
port: 5020,
contentBase: path.join(__dirname, "public"),
contentBasePublicPath: "/login",
},
module: {
rules: [
{
@ -68,10 +73,9 @@ module.exports = {
filename: "remoteEntry.js",
remotes: {
studio: "studio@http://localhost:5001/remoteEntry.js",
login: "login@http://localhost:5020/remoteEntry.js",
},
exposes: {
"./page": "./src/LoginContent.jsx",
"./page": "./src/Login.jsx",
},
shared: {
...deps,
@ -85,7 +89,7 @@ module.exports = {
},
},
}),
new HtmlWebPackPlugin({
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],

1525
yarn.lock
View File

File diff suppressed because it is too large Load Diff