Web:Client: add declarative router object
This commit is contained in:
Timofey Boyko
parent
c3725e3099
commit
56ab350cb4
@ -1,13 +1,16 @@
|
||||
//import "@docspace/common/utils/wdyr";
|
||||
import React from "react";
|
||||
import { RouterProvider } from "react-router-dom";
|
||||
|
||||
import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
|
||||
import Shell from "client/shell";
|
||||
import "@docspace/common/custom.scss";
|
||||
|
||||
import router from "./router";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<Shell />
|
||||
<RouterProvider router={router} />
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
188
packages/client/src/Client.jsx
Normal file
188
packages/client/src/Client.jsx
Normal file
@ -0,0 +1,188 @@
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useLocation, Navigate, Route, Outlet } from "react-router-dom";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
import Article from "@docspace/common/components/Article";
|
||||
import {
|
||||
updateTempContent,
|
||||
loadScript,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} from "@docspace/common/utils";
|
||||
import { regDesktop } from "@docspace/common/desktop";
|
||||
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
|
||||
import FilesPanels from "./components/FilesPanels";
|
||||
import GlobalEvents from "./components/GlobalEvents";
|
||||
import {
|
||||
ArticleBodyContent,
|
||||
ArticleHeaderContent,
|
||||
ArticleMainButtonContent,
|
||||
} from "./components/Article";
|
||||
|
||||
const ClientArticle = React.memo(({ withMainButton }) => {
|
||||
return (
|
||||
<Article withMainButton={withMainButton}>
|
||||
<Article.Header>
|
||||
<ArticleHeaderContent />
|
||||
</Article.Header>
|
||||
|
||||
<Article.MainButton>
|
||||
<ArticleMainButtonContent />
|
||||
</Article.MainButton>
|
||||
|
||||
<Article.Body>
|
||||
<ArticleBodyContent />
|
||||
</Article.Body>
|
||||
</Article>
|
||||
);
|
||||
});
|
||||
|
||||
const ClientContent = (props) => {
|
||||
const {
|
||||
loadClientInfo,
|
||||
setIsLoaded,
|
||||
isAuthenticated,
|
||||
user,
|
||||
isEncryption,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isLoaded,
|
||||
isDesktop,
|
||||
showMenu,
|
||||
isFrame,
|
||||
withMainButton,
|
||||
t,
|
||||
setFirstLoad,
|
||||
isLoading,
|
||||
} = props;
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
const isEditor = location.pathname.indexOf("doceditor") !== -1;
|
||||
const isFormGallery = location.pathname.split("/").includes("form-gallery");
|
||||
|
||||
const [isDesktopInit, setIsDesktopInit] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
loadScript("/static/scripts/tiff.min.js", "img-tiff-script");
|
||||
|
||||
loadClientInfo()
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => {
|
||||
setIsLoaded(true);
|
||||
|
||||
updateTempContent();
|
||||
});
|
||||
|
||||
return () => {
|
||||
const script = document.getElementById("img-tiff-script");
|
||||
document.body.removeChild(script);
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isAuthenticated && !isDesktopInit && isDesktop && isLoaded) {
|
||||
setIsDesktopInit(true);
|
||||
regDesktop(
|
||||
user,
|
||||
isEncryption,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isEditor,
|
||||
null,
|
||||
t
|
||||
);
|
||||
// console.log(
|
||||
// "%c%s",
|
||||
// "color: green; font: 1.2em bold;",
|
||||
// "Current keys is: ",
|
||||
// encryptionKeys
|
||||
// );
|
||||
}
|
||||
}, [
|
||||
t,
|
||||
isAuthenticated,
|
||||
user,
|
||||
isEncryption,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isLoaded,
|
||||
isDesktop,
|
||||
isDesktopInit,
|
||||
]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setFirstLoad(false);
|
||||
}, [setFirstLoad]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isLoading) {
|
||||
showLoader();
|
||||
} else {
|
||||
hideLoader();
|
||||
}
|
||||
}, [isLoading]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalEvents />
|
||||
<FilesPanels />
|
||||
{!isFormGallery ? (
|
||||
isFrame ? (
|
||||
showMenu && <ClientArticle />
|
||||
) : (
|
||||
<ClientArticle withMainButton={withMainButton} />
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Client = inject(({ auth, filesStore, peopleStore }) => {
|
||||
const {
|
||||
frameConfig,
|
||||
isFrame,
|
||||
isDesktopClient,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isEncryptionSupport,
|
||||
} = auth.settingsStore;
|
||||
|
||||
if (!auth.userStore.user) return;
|
||||
|
||||
const { isVisitor } = auth.userStore.user;
|
||||
|
||||
const { setFirstLoad, isLoading } = filesStore;
|
||||
|
||||
const withMainButton = !isVisitor;
|
||||
|
||||
return {
|
||||
isDesktop: isDesktopClient,
|
||||
isFrame,
|
||||
showMenu: frameConfig?.showMenu,
|
||||
user: auth.userStore.user,
|
||||
isAuthenticated: auth.isAuthenticated,
|
||||
encryptionKeys: encryptionKeys,
|
||||
isEncryption: isEncryptionSupport,
|
||||
isLoaded: auth.isLoaded && filesStore.isLoaded,
|
||||
setIsLoaded: filesStore.setIsLoaded,
|
||||
withMainButton,
|
||||
setFirstLoad,
|
||||
isLoading,
|
||||
setEncryptionKeys: setEncryptionKeys,
|
||||
loadClientInfo: async () => {
|
||||
const actions = [];
|
||||
actions.push(filesStore.initFiles());
|
||||
actions.push(peopleStore.init());
|
||||
await Promise.all(actions);
|
||||
},
|
||||
};
|
||||
})(withTranslation("Common")(observer(ClientContent)));
|
||||
|
||||
export default () => <Client />;
|
||||
@ -1,30 +1,22 @@
|
||||
import React, { useEffect } from "react";
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Routes,
|
||||
Route,
|
||||
Navigate,
|
||||
useLocation,
|
||||
} from "react-router-dom";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useLocation, useNavigate, Outlet } from "react-router-dom";
|
||||
import { inject, observer, Provider as MobxProvider } from "mobx-react";
|
||||
import NavMenu from "./components/NavMenu";
|
||||
import Main from "./components/Main";
|
||||
import PrivateRoute from "@docspace/common/components/PrivateRoute";
|
||||
import PublicRoute from "@docspace/common/components/PublicRoute";
|
||||
import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
|
||||
|
||||
import Layout from "./components/Layout";
|
||||
import ScrollToTop from "./components/Layout/ScrollToTop";
|
||||
import Toast from "@docspace/components/toast";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import { getLogoFromPath, updateTempContent } from "@docspace/common/utils";
|
||||
import { Provider as MobxProvider } from "mobx-react";
|
||||
|
||||
import ThemeProvider from "@docspace/components/theme-provider";
|
||||
import store from "client/store";
|
||||
|
||||
import config from "PACKAGE_FILE";
|
||||
import { I18nextProvider, useTranslation } from "react-i18next";
|
||||
import i18n from "./i18n";
|
||||
import AppLoader from "@docspace/common/components/AppLoader";
|
||||
|
||||
import Snackbar from "@docspace/components/snackbar";
|
||||
import moment from "moment";
|
||||
import ReactSmartBanner from "./components/SmartBanner";
|
||||
@ -34,130 +26,9 @@ import IndicatorLoader from "./components/IndicatorLoader";
|
||||
import DialogsWrapper from "./components/dialogs/DialogsWrapper";
|
||||
import MainBar from "./components/MainBar";
|
||||
import { Portal } from "@docspace/components";
|
||||
|
||||
import queryString from "query-string";
|
||||
|
||||
const Error404 = React.lazy(() => import("client/Error404"));
|
||||
const Error401 = React.lazy(() => import("client/Error401"));
|
||||
const Files = React.lazy(() => import("./pages/Files")); //import("./components/pages/Home"));
|
||||
|
||||
const About = React.lazy(() => import("./pages/About"));
|
||||
const Wizard = React.lazy(() => import("./pages/Wizard"));
|
||||
const PortalSettings = React.lazy(() => import("./pages/PortalSettings"));
|
||||
|
||||
const Confirm = !IS_PERSONAL && React.lazy(() => import("./pages/Confirm"));
|
||||
|
||||
const PreparationPortal = React.lazy(() => import("./pages/PreparationPortal"));
|
||||
const PortalUnavailable = React.lazy(() => import("./pages/PortalUnavailable"));
|
||||
const FormGallery = React.lazy(() => import("./pages/FormGallery"));
|
||||
|
||||
const ErrorUnavailable = React.lazy(() => import("./pages/Errors/Unavailable"));
|
||||
|
||||
const PortalSettingsRoute = (props) => {
|
||||
return (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<PortalSettings {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
const Error404Route = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Error404 {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const Error401Route = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Error401 {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const ErrorUnavailableRoute = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<ErrorUnavailable {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const FilesRoute = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Files {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const ConfirmRoute =
|
||||
!IS_PERSONAL &&
|
||||
((props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Confirm {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
));
|
||||
|
||||
const PreparationPortalRoute = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<PreparationPortal {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const PortalUnavailableRoute = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<PortalUnavailable {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const AboutRoute = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<About {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const WizardRoute = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Wizard {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const FormGalleryRoute = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<FormGallery {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const ConfirmNavigate = () => {
|
||||
const location = useLocation();
|
||||
|
||||
const type = queryString.parse(location.search).type;
|
||||
|
||||
return (
|
||||
<Navigate
|
||||
to={`/confirm/${type}`}
|
||||
search={location.search}
|
||||
state={{ from: location }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Shell = ({ items = [], page = "home", ...rest }) => {
|
||||
const {
|
||||
isLoaded,
|
||||
@ -451,120 +322,21 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<Layout>
|
||||
{toast}
|
||||
<ReactSmartBanner t={t} ready={ready} />
|
||||
{isEditor || !isMobileOnly ? <></> : <NavMenu />}
|
||||
{isMobileOnly && <MainBar />}
|
||||
<IndicatorLoader />
|
||||
<ScrollToTop />
|
||||
<DialogsWrapper t={t} />
|
||||
<Main isDesktop={isDesktop}>
|
||||
{!isMobileOnly && <MainBar />}
|
||||
<div className="main-container">
|
||||
<Routes>
|
||||
<Route
|
||||
caseSensitive
|
||||
path="/Products/Files/"
|
||||
element={<Navigate to="/rooms/shared" replace />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<FilesRoute />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={"/form-gallery/:folderId"}
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<FormGalleryRoute />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={"/wizard"}
|
||||
element={
|
||||
<PublicRoute>
|
||||
<WizardRoute />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={"/about"}
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AboutRoute />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* <Route path={"/confirm/:type/*"} element={<ConfirmRoute />} /> */}
|
||||
<Route path={"/confirm/*"} element={<ConfirmRoute />} />
|
||||
<Route path={"/confirm.aspx/*"} element={<ConfirmRoute />} />
|
||||
|
||||
<Route
|
||||
path={"/portal-settings/*"}
|
||||
element={
|
||||
<PrivateRoute restricted>
|
||||
<PortalSettingsRoute />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={"/portal-unavailable"}
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<PortalUnavailableRoute />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={"/preparation-portal"}
|
||||
element={
|
||||
<PublicRoute>
|
||||
<PreparationPortalRoute />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={"/unavailable"}
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<ErrorUnavailableRoute />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={"/error401"}
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<Error401Route />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<Error404Route />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</div>
|
||||
</Main>
|
||||
</Layout>
|
||||
</Router>
|
||||
<Layout>
|
||||
{toast}
|
||||
<ReactSmartBanner t={t} ready={ready} />
|
||||
{isEditor || !isMobileOnly ? <></> : <NavMenu />}
|
||||
{isMobileOnly && <MainBar />}
|
||||
<IndicatorLoader />
|
||||
<ScrollToTop />
|
||||
<DialogsWrapper t={t} />
|
||||
<Main isDesktop={isDesktop}>
|
||||
{!isMobileOnly && <MainBar />}
|
||||
<div className="main-container">
|
||||
<Outlet />
|
||||
</div>
|
||||
</Main>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -2,8 +2,7 @@ import React, { useEffect, useState } from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import PropTypes from "prop-types";
|
||||
import MobileLayout from "./MobileLayout";
|
||||
import history from "@docspace/common/history";
|
||||
import { useNavigate, useLocation, useMatch } from "react-router-dom";
|
||||
|
||||
import { size } from "@docspace/components/utils/device";
|
||||
import {
|
||||
isIOS,
|
||||
@ -41,9 +40,6 @@ const Layout = (props) => {
|
||||
const [contentHeight, setContentHeight] = useState();
|
||||
const [isPortrait, setIsPortrait] = useState();
|
||||
|
||||
history.navigate = useNavigate();
|
||||
history.location = useLocation();
|
||||
|
||||
const intervalTime = 100;
|
||||
const endTimeout = 300;
|
||||
let intervalHandler;
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import authStore from "@docspace/common/store/AuthStore";
|
||||
import { toCommunityHostname, getLanguage } from "@docspace/common/utils";
|
||||
import history from "@docspace/common/history";
|
||||
|
||||
import { CategoryType } from "./constants";
|
||||
import { FolderType, ShareAccessRights } from "@docspace/common/constants";
|
||||
import { translations } from "./autoGeneratedTranslations";
|
||||
// import router from "SRC_DIR/router";
|
||||
|
||||
export const setDocumentTitle = (subTitle = null) => {
|
||||
const { isAuthenticated, settingsStore, product: currentModule } = authStore;
|
||||
@ -29,7 +30,7 @@ export function loadLanguagePath(homepage, fixedNS = null) {
|
||||
return (lng, ns) => {
|
||||
const language = getLanguage(lng instanceof Array ? lng[0] : lng);
|
||||
|
||||
const lngCollection = translations.get(language);
|
||||
const lngCollection = translations?.get(language);
|
||||
|
||||
const data = lngCollection?.get(`${fixedNS || ns}`);
|
||||
|
||||
@ -95,7 +96,7 @@ export const onItemClick = (e) => {
|
||||
return window.open(link, "_blank");
|
||||
}
|
||||
|
||||
history.navigate(link);
|
||||
// router.navigate(link);
|
||||
};
|
||||
|
||||
export const getPasswordErrorMessage = (t, settings) => {
|
||||
|
||||
@ -1,102 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { Navigate, Routes, Route, useLocation } from "react-router-dom";
|
||||
import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import PrivateRoute from "@docspace/common/components/PrivateRoute";
|
||||
import AppLoader from "@docspace/common/components/AppLoader";
|
||||
import { /*combineUrl,*/ updateTempContent } from "@docspace/common/utils";
|
||||
import Home from "./AccountsHome";
|
||||
|
||||
import Filter from "@docspace/common/api/people/filter";
|
||||
import { showLoader, hideLoader } from "@docspace/common/utils";
|
||||
|
||||
const Error404 = React.lazy(() => import("client/Error404"));
|
||||
|
||||
const Error404Route = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Error404 {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const HomeRedirectToFilter = () => {
|
||||
const filter = Filter.getDefault();
|
||||
const urlFilter = filter.toUrlParams();
|
||||
|
||||
return <Navigate replace to={`/accounts/filter?${urlFilter}`} />;
|
||||
};
|
||||
|
||||
const PeopleSection = React.memo(() => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
<PrivateRoute restricted withManager location={location}>
|
||||
<HomeRedirectToFilter />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/filter"
|
||||
element={
|
||||
<PrivateRoute restricted withManager location={location}>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<Error404Route />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
});
|
||||
|
||||
const PeopleContent = (props) => {
|
||||
const { loadBaseInfo, isLoading, setFirstLoad } = props;
|
||||
|
||||
useEffect(() => {
|
||||
setFirstLoad(false);
|
||||
}, [setFirstLoad]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading) {
|
||||
showLoader();
|
||||
} else {
|
||||
hideLoader();
|
||||
}
|
||||
}, [isLoading]);
|
||||
|
||||
useEffect(() => {
|
||||
loadBaseInfo()
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => {
|
||||
updateTempContent();
|
||||
});
|
||||
}, []);
|
||||
|
||||
return <PeopleSection />;
|
||||
};
|
||||
|
||||
const People = inject(({ auth, filesStore, peopleStore }) => {
|
||||
const { setFirstLoad, isLoading } = filesStore;
|
||||
|
||||
return {
|
||||
loadBaseInfo: async () => {
|
||||
await peopleStore.init();
|
||||
//auth.setProductVersion(config.version);
|
||||
},
|
||||
setFirstLoad,
|
||||
isLoading,
|
||||
};
|
||||
})(observer(PeopleContent));
|
||||
|
||||
export default (props) => <People {...props} />;
|
||||
@ -1,159 +1,10 @@
|
||||
import React, { lazy } from "react";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import ConfirmRoute from "../../helpers/confirmRoute";
|
||||
|
||||
const ActivateUserForm = lazy(() => import("./sub-components/activateUser"));
|
||||
const CreateUserForm = lazy(() => import("./sub-components/createUser"));
|
||||
const ChangePasswordForm = lazy(() =>
|
||||
import("./sub-components/changePassword")
|
||||
);
|
||||
const ActivateEmailForm = lazy(() => import("./sub-components/activateEmail"));
|
||||
const ChangeEmailForm = lazy(() => import("./sub-components/changeEmail"));
|
||||
const ChangePhoneForm = lazy(() => import("./sub-components/changePhone"));
|
||||
const ProfileRemoveForm = lazy(() => import("./sub-components/profileRemove"));
|
||||
const ChangeOwnerForm = lazy(() => import("./sub-components/changeOwner"));
|
||||
const TfaAuthForm = lazy(() => import("./sub-components/tfaAuth"));
|
||||
const TfaActivationForm = lazy(() => import("./sub-components/tfaActivation"));
|
||||
const RemovePortal = lazy(() => import("./sub-components/removePortal"));
|
||||
const DeactivatePortal = lazy(() =>
|
||||
import("./sub-components/deactivatePortal")
|
||||
);
|
||||
const ContinuePortal = lazy(() => import("./sub-components/continuePortal"));
|
||||
const Auth = lazy(() => import("./sub-components/auth"));
|
||||
const Error404 = lazy(() => import("../Errors/404"));
|
||||
import React from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
|
||||
const Confirm = () => {
|
||||
//console.log("Confirm render");
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path={`LinkInvite`}
|
||||
element={
|
||||
<ConfirmRoute forUnauthorized>
|
||||
<CreateUserForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`Activation`}
|
||||
element={
|
||||
<ConfirmRoute forUnauthorized>
|
||||
<ActivateUserForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`EmailActivation`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<ActivateEmailForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`EmailChange`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<ChangeEmailForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`PasswordChange`}
|
||||
element={
|
||||
<ConfirmRoute forUnauthorized>
|
||||
<ChangePasswordForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`ProfileRemove`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<ProfileRemoveForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`PhoneActivation`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<ChangePhoneForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`PortalOwnerChange`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<ChangeOwnerForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`TfaAuth`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<TfaAuthForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`TfaActivation`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<TfaActivationForm />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`PortalRemove`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<RemovePortal />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`PortalSuspend`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<DeactivatePortal />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`PortalContinue`}
|
||||
element={
|
||||
<ConfirmRoute>
|
||||
<ContinuePortal />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`Auth`}
|
||||
element={
|
||||
<ConfirmRoute forUnauthorized>
|
||||
<Auth />
|
||||
</ConfirmRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
return <Outlet />;
|
||||
};
|
||||
|
||||
export default Confirm;
|
||||
|
||||
@ -1,346 +0,0 @@
|
||||
import React from "react";
|
||||
//import { Provider as FilesProvider } from "mobx-react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { Routes, useLocation, Navigate, Route } from "react-router-dom";
|
||||
//import config from "PACKAGE_FILE";
|
||||
import PrivateRoute from "@docspace/common/components/PrivateRoute";
|
||||
import AppLoader from "@docspace/common/components/AppLoader";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import {
|
||||
//combineUrl,
|
||||
updateTempContent,
|
||||
loadScript,
|
||||
} from "@docspace/common/utils";
|
||||
|
||||
//import i18n from "./i18n";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { regDesktop } from "@docspace/common/desktop";
|
||||
import Home from "./Home";
|
||||
import Settings from "./Settings";
|
||||
//import VersionHistory from "./VersionHistory";
|
||||
import PrivateRoomsPage from "./PrivateRoomsPage";
|
||||
import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
|
||||
import Panels from "../components/FilesPanels";
|
||||
import Article from "@docspace/common/components/Article";
|
||||
import {
|
||||
ArticleBodyContent,
|
||||
ArticleHeaderContent,
|
||||
ArticleMainButtonContent,
|
||||
} from "../components/Article";
|
||||
|
||||
import GlobalEvents from "../components/GlobalEvents";
|
||||
import Accounts from "./Accounts";
|
||||
import Profile from "./Profile";
|
||||
import NotificationComponent from "./Notifications";
|
||||
|
||||
// const homepage = config.homepage;
|
||||
|
||||
// const PROXY_HOMEPAGE_URL = combineUrl(window.DocSpaceConfig?.proxy?.url, homepage);
|
||||
|
||||
// const HOME_URL = combineUrl(PROXY_HOMEPAGE_URL, "/");
|
||||
// const SETTINGS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/settings/:setting");
|
||||
// const HISTORY_URL = combineUrl(PROXY_HOMEPAGE_URL, "/:fileId/history");
|
||||
// const PRIVATE_ROOMS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/private");
|
||||
// const FILTER_URL = combineUrl(PROXY_HOMEPAGE_URL, "/filter");
|
||||
// const MEDIA_VIEW_URL = combineUrl(PROXY_HOMEPAGE_URL, "/#preview");
|
||||
// const FORM_GALLERY_URL = combineUrl(
|
||||
// PROXY_HOMEPAGE_URL,
|
||||
// "/form-gallery/:folderId"
|
||||
// );
|
||||
// const ROOMS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/rooms");
|
||||
|
||||
const Error404 = React.lazy(() => import("client/Error404"));
|
||||
|
||||
const FilesArticle = React.memo(({ withMainButton }) => {
|
||||
const location = useLocation();
|
||||
const isFormGallery = location.pathname.split("/").includes("form-gallery");
|
||||
|
||||
return !isFormGallery ? (
|
||||
<Article withMainButton={withMainButton}>
|
||||
<Article.Header>
|
||||
<ArticleHeaderContent />
|
||||
</Article.Header>
|
||||
|
||||
<Article.MainButton>
|
||||
<ArticleMainButtonContent />
|
||||
</Article.MainButton>
|
||||
|
||||
<Article.Body>
|
||||
<ArticleBodyContent />
|
||||
</Article.Body>
|
||||
</Article>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
});
|
||||
|
||||
const Error404Route = (props) => (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Error404 {...props} />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
const FilesSection = React.memo(({ withMainButton }) => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<Navigate to="/rooms/shared" replace />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/rooms"
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<Navigate to="/rooms/shared" replace />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/rooms/personal/*"
|
||||
element={
|
||||
<PrivateRoute
|
||||
restricted
|
||||
withManager
|
||||
withCollaborator
|
||||
location={location}
|
||||
>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/files/trash/*"
|
||||
element={
|
||||
<PrivateRoute
|
||||
restricted
|
||||
withManager
|
||||
withCollaborator
|
||||
location={location}
|
||||
>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/rooms/shared/*"
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/rooms/archived/*"
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/products/files/"
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/accounts/*"
|
||||
element={
|
||||
<PrivateRoute restricted withManager location={location}>
|
||||
<Accounts />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/accounts/create/:type"
|
||||
element={
|
||||
<PrivateRoute restricted withManager location={location}>
|
||||
<Accounts />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/accounts/view/@self"
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<Profile />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="accounts/view/@self/notification"
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<NotificationComponent />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={"/settings"}
|
||||
element={
|
||||
<PrivateRoute withCollaborator restricted location={location}>
|
||||
<Navigate to="/settings/common" replace />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={"/settings/*"}
|
||||
element={
|
||||
<PrivateRoute withCollaborator restricted location={location}>
|
||||
<Settings />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
element={
|
||||
<PrivateRoute location={location}>
|
||||
<Error404Route />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
});
|
||||
|
||||
const FilesContent = (props) => {
|
||||
const pathname = window.location.pathname.toLowerCase();
|
||||
const isEditor = pathname.indexOf("doceditor") !== -1;
|
||||
const [isDesktopInit, setIsDesktopInit] = React.useState(false);
|
||||
|
||||
const {
|
||||
loadFilesInfo,
|
||||
setIsLoaded,
|
||||
isAuthenticated,
|
||||
user,
|
||||
isEncryption,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isLoaded,
|
||||
isDesktop,
|
||||
showMenu,
|
||||
isFrame,
|
||||
withMainButton,
|
||||
|
||||
t,
|
||||
} = props;
|
||||
|
||||
React.useEffect(() => {
|
||||
loadScript("/static/scripts/tiff.min.js", "img-tiff-script");
|
||||
|
||||
loadFilesInfo()
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => {
|
||||
setIsLoaded(true);
|
||||
|
||||
updateTempContent();
|
||||
});
|
||||
|
||||
return () => {
|
||||
const script = document.getElementById("img-tiff-script");
|
||||
document.body.removeChild(script);
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isAuthenticated && !isDesktopInit && isDesktop && isLoaded) {
|
||||
setIsDesktopInit(true);
|
||||
regDesktop(
|
||||
user,
|
||||
isEncryption,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isEditor,
|
||||
null,
|
||||
t
|
||||
);
|
||||
console.log(
|
||||
"%c%s",
|
||||
"color: green; font: 1.2em bold;",
|
||||
"Current keys is: ",
|
||||
encryptionKeys
|
||||
);
|
||||
}
|
||||
}, [
|
||||
t,
|
||||
isAuthenticated,
|
||||
user,
|
||||
isEncryption,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isLoaded,
|
||||
isDesktop,
|
||||
isDesktopInit,
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalEvents />
|
||||
<Panels />
|
||||
{isFrame ? (
|
||||
showMenu && <FilesArticle />
|
||||
) : (
|
||||
<FilesArticle withMainButton={withMainButton} />
|
||||
)}
|
||||
<FilesSection withMainButton={withMainButton} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Files = inject(({ auth, filesStore }) => {
|
||||
const {
|
||||
frameConfig,
|
||||
isFrame,
|
||||
isDesktopClient,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isEncryptionSupport,
|
||||
} = auth.settingsStore;
|
||||
|
||||
if (!auth.userStore.user) return;
|
||||
|
||||
const { isVisitor } = auth.userStore.user;
|
||||
|
||||
const withMainButton = !isVisitor;
|
||||
|
||||
return {
|
||||
isDesktop: isDesktopClient,
|
||||
isFrame,
|
||||
showMenu: frameConfig?.showMenu,
|
||||
user: auth.userStore.user,
|
||||
isAuthenticated: auth.isAuthenticated,
|
||||
encryptionKeys: encryptionKeys,
|
||||
isEncryption: isEncryptionSupport,
|
||||
isLoaded: auth.isLoaded && filesStore.isLoaded,
|
||||
setIsLoaded: filesStore.setIsLoaded,
|
||||
withMainButton,
|
||||
|
||||
setEncryptionKeys: setEncryptionKeys,
|
||||
loadFilesInfo: async () => {
|
||||
await filesStore.initFiles();
|
||||
//auth.setProductVersion(config.version);
|
||||
},
|
||||
};
|
||||
})(withTranslation("Common")(observer(FilesContent)));
|
||||
|
||||
export default () => <Files />;
|
||||
@ -1,143 +1,14 @@
|
||||
import React, { lazy } from "react";
|
||||
import { Route, Routes, Navigate } from "react-router-dom";
|
||||
import React from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Layout from "./Layout";
|
||||
import { combineUrl } from "@docspace/common/utils";
|
||||
|
||||
import Panels from "../../components/FilesPanels";
|
||||
|
||||
const SecuritySettings = lazy(() => import("./categories/security/index.js"));
|
||||
|
||||
const TfaPage = lazy(() => import("./categories/security/access-portal/tfa"));
|
||||
const PasswordStrengthPage = lazy(() =>
|
||||
import("./categories/security/access-portal/passwordStrength")
|
||||
);
|
||||
const TrustedMailPage = lazy(() =>
|
||||
import("./categories/security/access-portal/trustedMail")
|
||||
);
|
||||
const IpSecurityPage = lazy(() =>
|
||||
import("./categories/security/access-portal/ipSecurity")
|
||||
);
|
||||
const AdminMessagePage = lazy(() =>
|
||||
import("./categories/security/access-portal/adminMessage")
|
||||
);
|
||||
const SessionLifetimePage = lazy(() =>
|
||||
import("./categories/security/access-portal/sessionLifetime")
|
||||
);
|
||||
|
||||
const CustomizationSettings = lazy(() =>
|
||||
import("./categories/common/index.js")
|
||||
);
|
||||
|
||||
const DeveloperTools = lazy(() =>
|
||||
import("./categories/developer-tools/index.js")
|
||||
);
|
||||
|
||||
const LanguageAndTimeZoneSettings = lazy(() =>
|
||||
import("./categories/common/Customization/language-and-time-zone")
|
||||
);
|
||||
|
||||
const WelcomePageSettings = lazy(() =>
|
||||
import("./categories/common/Customization/welcome-page-settings")
|
||||
);
|
||||
|
||||
const DNSSettings = lazy(() =>
|
||||
import("./categories/common/Customization/dns-settings")
|
||||
);
|
||||
|
||||
const PortalRenaming = lazy(() =>
|
||||
import("./categories/common/Customization/portal-renaming")
|
||||
);
|
||||
|
||||
const Integration = lazy(() => import("./categories/integration"));
|
||||
const Payments = lazy(() => import("./categories/payments"));
|
||||
const ThirdParty = lazy(() =>
|
||||
import("./categories/integration/ThirdPartyServicesSettings")
|
||||
);
|
||||
const SingleSignOn = lazy(() =>
|
||||
import("./categories/integration/SingleSignOn")
|
||||
);
|
||||
|
||||
const Backup = lazy(() => import("./categories/data-management/index"));
|
||||
|
||||
const RestoreBackup = lazy(() =>
|
||||
import("./categories/data-management/backup/restore-backup/index")
|
||||
);
|
||||
const DeleteDataPage = lazy(() => import("./categories/delete-data"));
|
||||
|
||||
const WhiteLabel = lazy(() =>
|
||||
import("./categories/common/Branding/whitelabel")
|
||||
);
|
||||
|
||||
const Branding = lazy(() => import("./categories/common/branding"));
|
||||
|
||||
const ERROR_404_URL = combineUrl(
|
||||
window.DocSpaceConfig?.proxy?.url,
|
||||
"/error/404"
|
||||
);
|
||||
|
||||
const Settings = () => {
|
||||
return (
|
||||
<Layout key="1">
|
||||
<Panels />
|
||||
<Routes>
|
||||
<Route path={"/*"} element={<CustomizationSettings />} />
|
||||
<Route path={"/customization/*"} element={<CustomizationSettings />} />
|
||||
<Route
|
||||
path={"/customization/general/language-and-time-zone"}
|
||||
element={<LanguageAndTimeZoneSettings />}
|
||||
/>
|
||||
<Route
|
||||
path={"/customization/general/welcome-page-settings"}
|
||||
element={<WelcomePageSettings />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={"/customization/general/dns-settings"}
|
||||
element={<DNSSettings />}
|
||||
/>
|
||||
<Route
|
||||
path={"/customization/general/portal-renaming"}
|
||||
element={<PortalRenaming />}
|
||||
/>
|
||||
<Route path={"/common/whitelabel"} element={<WhiteLabel />} />
|
||||
<Route path={"/security/*"} element={<SecuritySettings />} />
|
||||
<Route path={"security/access-portal"} element={<SecuritySettings />} />
|
||||
<Route path={"/security/access-portal/tfa"} element={<TfaPage />} />
|
||||
<Route
|
||||
path={"/security/access-portal/password"}
|
||||
element={<PasswordStrengthPage />}
|
||||
/>
|
||||
<Route
|
||||
path={"/security/access-portal/trusted-mail"}
|
||||
element={<TrustedMailPage />}
|
||||
/>
|
||||
<Route
|
||||
path={"/security/access-portal/ip"}
|
||||
element={<IpSecurityPage />}
|
||||
/>
|
||||
<Route
|
||||
path={"/security/access-portal/admin-message"}
|
||||
element={<AdminMessagePage />}
|
||||
/>
|
||||
<Route
|
||||
path={"/security/access-portal/lifetime"}
|
||||
element={<SessionLifetimePage />}
|
||||
/>
|
||||
<Route path={"/integration/*"} element={<Integration />} />
|
||||
<Route path={"/payments/portal-payments"} element={<Payments />} />
|
||||
<Route
|
||||
path={"/integration/third-party-services"}
|
||||
element={<ThirdParty />}
|
||||
/>
|
||||
<Route
|
||||
path={"/integration/single-sign-on"}
|
||||
element={<SingleSignOn />}
|
||||
/>
|
||||
<Route path={"/developer/*"} element={<DeveloperTools />} />
|
||||
<Route path={"/backup/*"} element={<Backup />} />
|
||||
<Route path={"/delete-data/*"} element={<DeleteDataPage />} />
|
||||
<Route path={"/restore/*"} element={<RestoreBackup />} />
|
||||
<Route element={<Navigate to={ERROR_404_URL} replace />} />
|
||||
</Routes>
|
||||
<Outlet />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
636
packages/client/src/router.js
Normal file
636
packages/client/src/router.js
Normal file
@ -0,0 +1,636 @@
|
||||
import React from "react";
|
||||
import { createBrowserRouter, Navigate } from "react-router-dom";
|
||||
|
||||
import PrivateRoute from "@docspace/common/components/PrivateRoute";
|
||||
import PublicRoute from "@docspace/common/components/PublicRoute";
|
||||
import ConfirmRoute from "./helpers/confirmRoute";
|
||||
import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
|
||||
import AppLoader from "@docspace/common/components/AppLoader";
|
||||
|
||||
import Root from "./Shell";
|
||||
const Client = React.lazy(() => import("./Client"));
|
||||
const PortalSettings = React.lazy(() => import("./pages/PortalSettings"));
|
||||
|
||||
const Home = React.lazy(() => import("./pages/Home"));
|
||||
const AccountsHome = React.lazy(() => import("./pages/AccountsHome"));
|
||||
const Settings = React.lazy(() => import("./pages/Settings"));
|
||||
const Profile = React.lazy(() => import("./pages/Profile"));
|
||||
const NotificationComponent = React.lazy(() => import("./pages/Notifications"));
|
||||
const Confirm = React.lazy(() => import("./pages/Confirm"));
|
||||
|
||||
const CustomizationSettings = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/common/index.js")
|
||||
);
|
||||
const LanguageAndTimeZoneSettings = React.lazy(() =>
|
||||
import(
|
||||
"./pages/PortalSettings/categories/common/Customization/language-and-time-zone"
|
||||
)
|
||||
);
|
||||
const WelcomePageSettings = React.lazy(() =>
|
||||
import(
|
||||
"./pages/PortalSettings/categories/common/Customization/welcome-page-settings"
|
||||
)
|
||||
);
|
||||
const DNSSettings = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/common/Customization/dns-settings")
|
||||
);
|
||||
const PortalRenaming = React.lazy(() =>
|
||||
import(
|
||||
"./pages/PortalSettings/categories/common/Customization/portal-renaming"
|
||||
)
|
||||
);
|
||||
const WhiteLabel = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/common/Branding/whitelabel")
|
||||
);
|
||||
const SecuritySettings = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/security/index.js")
|
||||
);
|
||||
const TfaPage = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/security/access-portal/tfa")
|
||||
);
|
||||
const PasswordStrengthPage = React.lazy(() =>
|
||||
import(
|
||||
"./pages/PortalSettings/categories/security/access-portal/passwordStrength"
|
||||
)
|
||||
);
|
||||
const TrustedMailPage = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/security/access-portal/trustedMail")
|
||||
);
|
||||
const IpSecurityPage = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/security/access-portal/ipSecurity")
|
||||
);
|
||||
const AdminMessagePage = React.lazy(() =>
|
||||
import(
|
||||
"./pages/PortalSettings/categories/security/access-portal/adminMessage"
|
||||
)
|
||||
);
|
||||
const SessionLifetimePage = React.lazy(() =>
|
||||
import(
|
||||
"./pages/PortalSettings/categories/security/access-portal/sessionLifetime"
|
||||
)
|
||||
);
|
||||
const Integration = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/integration")
|
||||
);
|
||||
const Payments = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/payments")
|
||||
);
|
||||
const ThirdParty = React.lazy(() =>
|
||||
import(
|
||||
"./pages/PortalSettings/categories/integration/ThirdPartyServicesSettings"
|
||||
)
|
||||
);
|
||||
const SingleSignOn = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/integration/SingleSignOn")
|
||||
);
|
||||
const DeveloperTools = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/developer-tools/index.js")
|
||||
);
|
||||
const Backup = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/data-management/index")
|
||||
);
|
||||
const DeleteDataPage = React.lazy(() =>
|
||||
import("./pages/PortalSettings/categories/delete-data")
|
||||
);
|
||||
const RestoreBackup = React.lazy(() =>
|
||||
import(
|
||||
"./pages/PortalSettings/categories/data-management/backup/restore-backup/index"
|
||||
)
|
||||
);
|
||||
|
||||
const FormGallery = React.lazy(() => import("./pages/FormGallery"));
|
||||
const About = React.lazy(() => import("./pages/About"));
|
||||
const Wizard = React.lazy(() => import("./pages/Wizard"));
|
||||
const PreparationPortal = React.lazy(() => import("./pages/PreparationPortal"));
|
||||
const PortalUnavailable = React.lazy(() => import("./pages/PortalUnavailable"));
|
||||
const ErrorUnavailable = React.lazy(() => import("./pages/Errors/Unavailable"));
|
||||
|
||||
const ActivateUserForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/activateUser")
|
||||
);
|
||||
const CreateUserForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/createUser")
|
||||
);
|
||||
const ChangePasswordForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/changePassword")
|
||||
);
|
||||
const ActivateEmailForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/activateEmail")
|
||||
);
|
||||
const ChangeEmailForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/changeEmail")
|
||||
);
|
||||
const ChangePhoneForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/changePhone")
|
||||
);
|
||||
const ProfileRemoveForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/profileRemove")
|
||||
);
|
||||
const ChangeOwnerForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/changeOwner")
|
||||
);
|
||||
const TfaAuthForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/tfaAuth")
|
||||
);
|
||||
const TfaActivationForm = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/tfaActivation")
|
||||
);
|
||||
const RemovePortal = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/removePortal")
|
||||
);
|
||||
const DeactivatePortal = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/deactivatePortal")
|
||||
);
|
||||
const ContinuePortal = React.lazy(() =>
|
||||
import("./pages/Confirm/sub-components/continuePortal")
|
||||
);
|
||||
const Auth = React.lazy(() => import("./pages/Confirm/sub-components/auth"));
|
||||
|
||||
const Error404 = React.lazy(() => import("client/Error404"));
|
||||
const Error401 = React.lazy(() => import("client/Error401"));
|
||||
|
||||
const confirmRoutes = [
|
||||
{
|
||||
path: "LinkInvite",
|
||||
element: (
|
||||
<ConfirmRoute forUnauthorized>
|
||||
<CreateUserForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "Activation",
|
||||
element: (
|
||||
<ConfirmRoute forUnauthorized>
|
||||
<ActivateUserForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "EmailActivation",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<ActivateEmailForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "EmailChange",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<ChangeEmailForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "PasswordChange",
|
||||
element: (
|
||||
<ConfirmRoute forUnauthorized>
|
||||
<ChangePasswordForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "ProfileRemove",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<ProfileRemoveForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "PhoneActivation",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<ChangePhoneForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "PortalOwnerChange",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<ChangeOwnerForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "TfaAuth",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<TfaAuthForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "TfaActivation",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<TfaActivationForm />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "PortalRemove",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<RemovePortal />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "PortalSuspend",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<DeactivatePortal />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "PortalContinue",
|
||||
element: (
|
||||
<ConfirmRoute>
|
||||
<ContinuePortal />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "Auth",
|
||||
element: (
|
||||
<ConfirmRoute forUnauthorized>
|
||||
<Auth />
|
||||
</ConfirmRoute>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const NotFoundError = () => {
|
||||
return (
|
||||
<PrivateRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Error404 />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PrivateRoute>
|
||||
);
|
||||
};
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <Root />,
|
||||
errorElement: <NotFoundError />,
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Client />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PrivateRoute>
|
||||
),
|
||||
errorElement: <NotFoundError />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<Navigate to="/rooms/shared" replace />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "rooms",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<Navigate to="/rooms/shared" replace />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "rooms/personal/*",
|
||||
element: (
|
||||
<PrivateRoute restricted withManager withCollaborator>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "files/trash/*",
|
||||
element: (
|
||||
<PrivateRoute restricted withManager withCollaborator>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "rooms/shared/*",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "rooms/archived/*",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "products/files/",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<Home />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "accounts",
|
||||
element: (
|
||||
<PrivateRoute restricted withManager>
|
||||
<Navigate to="/accounts/filter" replace />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "accounts/filter",
|
||||
element: (
|
||||
<PrivateRoute restricted withManager>
|
||||
<AccountsHome />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "accounts/view/@self",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<Profile />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "accounts/view/@self/notification",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<NotificationComponent />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "settings",
|
||||
element: (
|
||||
<PrivateRoute withCollaborator restricted>
|
||||
<Navigate to="/settings/common" replace />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "settings/common",
|
||||
element: (
|
||||
<PrivateRoute withCollaborator restricted>
|
||||
<Settings />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "settings/admin",
|
||||
element: (
|
||||
<PrivateRoute withCollaborator restricted>
|
||||
<Settings />
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/portal-settings/",
|
||||
element: (
|
||||
<PrivateRoute restricted>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<PortalSettings />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PrivateRoute>
|
||||
),
|
||||
errorElement: <NotFoundError />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <CustomizationSettings />,
|
||||
},
|
||||
{
|
||||
path: "customization",
|
||||
element: <CustomizationSettings />,
|
||||
},
|
||||
{
|
||||
path: "customization/general/language-and-time-zone",
|
||||
element: <LanguageAndTimeZoneSettings />,
|
||||
},
|
||||
{
|
||||
path: "customization/general/welcome-page-settings",
|
||||
element: <WelcomePageSettings />,
|
||||
},
|
||||
{
|
||||
path: "customization/general/dns-settings",
|
||||
element: <DNSSettings />,
|
||||
},
|
||||
{
|
||||
path: "customization/general/portal-renaming",
|
||||
element: <PortalRenaming />,
|
||||
},
|
||||
{
|
||||
path: "common/whitelabel",
|
||||
element: <WhiteLabel />,
|
||||
},
|
||||
{
|
||||
path: "security/*",
|
||||
element: <SecuritySettings />,
|
||||
},
|
||||
{
|
||||
path: "security/access-portal",
|
||||
element: <SecuritySettings />,
|
||||
},
|
||||
{
|
||||
path: "security/access-portal/tfa",
|
||||
element: <TfaPage />,
|
||||
},
|
||||
{
|
||||
path: "security/access-portal/password",
|
||||
element: <PasswordStrengthPage />,
|
||||
},
|
||||
{
|
||||
path: "security/access-portal/trusted-mail",
|
||||
element: <TrustedMailPage />,
|
||||
},
|
||||
{
|
||||
path: "security/access-portal/ip",
|
||||
element: <IpSecurityPage />,
|
||||
},
|
||||
{
|
||||
path: "security/access-portal/admin-message",
|
||||
element: <AdminMessagePage />,
|
||||
},
|
||||
{
|
||||
path: "security/access-portal/lifetime",
|
||||
element: <SessionLifetimePage />,
|
||||
},
|
||||
{
|
||||
path: "integration/*",
|
||||
element: <Integration />,
|
||||
},
|
||||
{
|
||||
path: "integration/third-party-services",
|
||||
element: <ThirdParty />,
|
||||
},
|
||||
{
|
||||
path: "integration/single-sign-on",
|
||||
element: <SingleSignOn />,
|
||||
},
|
||||
{
|
||||
path: "payments/portal-payments",
|
||||
element: <Payments />,
|
||||
},
|
||||
{
|
||||
path: "developer/*",
|
||||
element: <DeveloperTools />,
|
||||
},
|
||||
{
|
||||
path: "backup/*",
|
||||
element: <Backup />,
|
||||
},
|
||||
{
|
||||
path: "delete-data/*",
|
||||
element: <DeleteDataPage />,
|
||||
},
|
||||
{
|
||||
path: "restore/*",
|
||||
element: <RestoreBackup />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/Products/Files/",
|
||||
caseSensitive: true,
|
||||
element: <Navigate to="/rooms/shared" replace />,
|
||||
},
|
||||
{
|
||||
path: "/form-gallery/:folderId",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<FormGallery />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/wizard",
|
||||
element: (
|
||||
<PublicRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Wizard />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PublicRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<About />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/confirm.aspx/*",
|
||||
element: (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Confirm />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
),
|
||||
errorElement: <NotFoundError />,
|
||||
children: [...confirmRoutes],
|
||||
},
|
||||
{
|
||||
path: "/confirm/*",
|
||||
element: (
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Confirm />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
),
|
||||
errorElement: <NotFoundError />,
|
||||
children: [...confirmRoutes],
|
||||
},
|
||||
{
|
||||
path: "/portal-unavailable",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<PortalUnavailable />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/unavailable",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<ErrorUnavailable />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/preparation-portal",
|
||||
element: (
|
||||
<PublicRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<PreparationPortal />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PublicRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/error401",
|
||||
element: (
|
||||
<PrivateRoute>
|
||||
<React.Suspense fallback={<AppLoader />}>
|
||||
<ErrorBoundary>
|
||||
<Error401 />
|
||||
</ErrorBoundary>
|
||||
</React.Suspense>
|
||||
</PrivateRoute>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
export default router;
|
||||
Loading…
Reference in New Issue
Block a user