Web: fix confirm pages

packages/client/src/Shell.jsx

@@ -466,7 +466,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
                 }
               />
 
-              <Route path={"/confirm"} element={<ConfirmRoute />} />
+              <Route path={"/confirm/*"} element={<ConfirmRoute />} />
 
               <Route
                 path={"/portal-settings"}

packages/client/src/helpers/confirmRoute.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Route } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { ValidationResult } from "./../helpers/constants";
 import Loader from "@docspace/components/loader";
 import Section from "@docspace/common/components/Section";
@@ -7,23 +7,21 @@ import { checkConfirmLink } from "@docspace/common/api/user"; //TODO: Move AuthS
 import { combineUrl, getObjectByLocation } from "@docspace/common/utils";
 import { inject, observer } from "mobx-react";
 
-class ConfirmRoute extends React.Component {
+const ConfirmRoute = (props) => {
-  constructor(props) {
+  const [state, setState] = React.useState({
-    super(props);
+    linkData: {},
-    this.state = {
+    isLoaded: false,
-      linkData: {},
+  });
-      isLoaded: false,
-    };
-  }
 
-  componentDidMount() {
+  const location = useLocation();
-    const { forUnauthorized, isAuthenticated } = this.props;
+
+  React.useEffect(() => {
+    const { forUnauthorized, isAuthenticated } = props;
 
     if (forUnauthorized && isAuthenticated) {
-      this.props.logout();
+      props.logout();
     }
 
-    const { location } = this.props;
     const { search } = location;
 
     const queryParams = getObjectByLocation(location);
@@ -53,10 +51,7 @@ class ConfirmRoute extends React.Component {
               linkData,
             });
 
-            this.setState({
+            setState((val) => ({ ...val, isLoaded: true, linkData }));
-              isLoaded: true,
-              linkData,
-            });
             break;
           case ValidationResult.Invalid:
             console.error("invlid link", { confirmLinkData, validationResult });
@@ -98,33 +93,22 @@ class ConfirmRoute extends React.Component {
           "/error"
         );
       });
-  }
+  }, []);
 
-  render() {
+  // console.log(`ConfirmRoute render`, this.props, this.state);
-    const { component: Component, ...rest } = this.props;
 
-    // console.log(`ConfirmRoute render`, this.props, this.state);
+  return !state.isLoaded ? (
-
+    <Section>
-    return (
+      <Section.SectionBody>
-      <Route
+        <Loader className="pageLoader" type="rombs" size="40px" />
-        {...rest}
+      </Section.SectionBody>
-        render={(props) =>
+    </Section>
-          !this.state.isLoaded ? (
+  ) : (
-            <Section>
+    React.cloneElement(props.children, {
-              <Section.SectionBody>
+      linkData: state.linkData,
-                <Loader className="pageLoader" type="rombs" size="40px" />
+    })
-              </Section.SectionBody>
+  );
-            </Section>
+};
-          ) : (
-            <Component
-              {...(props = { ...props, linkData: this.state.linkData })}
-            />
-          )
-        }
-      />
-    );
-  }
-}
 
 export default inject(({ auth }) => {
   const { isAuthenticated, logout } = auth;

packages/client/src/helpers/utils.js

@@ -100,10 +100,10 @@ export const onItemClick = (e) => {
 
 export const getPasswordErrorMessage = (t, settings) => {
   return `${t("Common:PasswordMinimumLength")} ${
-    settings ? settings.minLength : 8
+    settings ? settings?.minLength : 8
-  } ${settings.digits ? t("Common:PasswordLimitDigits") : ""} ${
+  } ${settings?.digits ? t("Common:PasswordLimitDigits") : ""} ${
-    settings.upperCase ? t("Common:PasswordLimitUpperCase") : ""
+    settings?.upperCase ? t("Common:PasswordLimitUpperCase") : ""
-  } ${settings.specSymbols ? t("Common:PasswordLimitSpecialSymbols") : ""}`;
+  } ${settings?.specSymbols ? t("Common:PasswordLimitSpecialSymbols") : ""}`;
 };
 
 export const getCategoryType = (location) => {

packages/client/src/pages/Confirm/index.js

@@ -1,5 +1,5 @@
 import React, { lazy } from "react";
-import { Switch } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import ConfirmRoute from "../../helpers/confirmRoute";
 import ConfirmWrapper from "./ConfirmWrapper";
 
@@ -22,78 +22,137 @@ const DeactivatePortal = lazy(() =>
 const ContinuePortal = lazy(() => import("./sub-components/continuePortal"));
 const Auth = lazy(() => import("./sub-components/auth"));
 
-const Confirm = ({ match }) => {
+const Confirm = () => {
   //console.log("Confirm render");
-  const path = match.path;
-  return (
-    <>
-      <Switch>
-        <ConfirmRoute
-          forUnauthorized
-          path={`${path}/LinkInvite`}
-          component={CreateUserForm}
-        />
-        <ConfirmRoute
-          forUnauthorized
-          path={`${path}/Activation`}
-          component={ActivateUserForm}
-        />
-        <ConfirmRoute
-          exact
-          path={`${path}/EmailActivation`}
-          component={ActivateEmailForm}
-        />
-        <ConfirmRoute
-          exact
-          path={`${path}/EmailChange`}
-          component={ChangeEmailForm}
-        />
-        <ConfirmRoute
-          forUnauthorized
-          path={`${path}/PasswordChange`}
-          component={ChangePasswordForm}
-        />
-        <ConfirmRoute
-          exact
-          path={`${path}/ProfileRemove`}
-          component={ProfileRemoveForm}
-        />
-        <ConfirmRoute
-          exact
-          path={`${path}/PhoneActivation`}
-          component={ChangePhoneForm}
-        />
-        <ConfirmRoute
-          exact
-          path={`${path}/PortalOwnerChange`}
-          component={ChangeOwnerForm}
-        />
-        <ConfirmRoute exact path={`${path}/TfaAuth`} component={TfaAuthForm} />
-        <ConfirmRoute
-          exact
-          path={`${path}/TfaActivation`}
-          component={TfaActivationForm}
-        />
-        <ConfirmRoute
-          exact
-          path={`${path}/PortalRemove`}
-          component={RemovePortal}
-        />
-        <ConfirmRoute
-          exact
-          path={`${path}/PortalSuspend`}
-          component={DeactivatePortal}
-        />
-        <ConfirmRoute
-          exact
-          path={`${path}/PortalContinue`}
-          component={ContinuePortal}
-        />
-        <ConfirmRoute forUnauthorized path={`${path}/Auth`} component={Auth} />
 
-        {/* <Route component={Error404} /> */}
+  return (
-      </Switch>
+    <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>
   );
 };
 

packages/client/src/pages/Confirm/sub-components/changeEmail.js

@@ -71,7 +71,6 @@ class ChangeEmail extends React.PureComponent {
 }
 
 ChangeEmail.propTypes = {
-  location: PropTypes.object.isRequired,
   changeEmail: PropTypes.func.isRequired,
 };
 const ChangeEmailForm = (props) => (

packages/client/src/pages/Confirm/sub-components/continuePortal.js

@@ -29,7 +29,7 @@ const ContinuePortal = (props) => {
     try {
       await continuePortal(linkData.confirmHeader);
       setIsReactivate(true);
-      setTimeout(() => (location.href = "/"), 10000);
+      setTimeout(() => (window.location.href = "/"), 10000);
     } catch (e) {
       toastr.error(e);
     }

packages/client/src/pages/Confirm/sub-components/createUser.js

@@ -42,7 +42,7 @@ const CreateUserForm = (props) => {
   const { settings, t, greetingTitle, providers, isDesktop, linkData } = props;
   const inputRef = React.useRef(null);
 
-  const emailFromLink = linkData.email ? linkData.email : "";
+  const emailFromLink = linkData?.email ? linkData.email : "";
 
   const [moreAuthVisible, setMoreAuthVisible] = useState(false);
   const [ssoLabel, setSsoLabel] = useState("");
@@ -636,10 +636,6 @@ const CreateUserForm = (props) => {
   );
 };
 
-CreateUserForm.propTypes = {
-  location: PropTypes.object.isRequired,
-};
-
 export default inject(({ auth }) => {
   const {
     login,

packages/client/src/pages/Confirm/sub-components/deactivatePortal.js

@@ -33,7 +33,7 @@ const DeactivatePortal = (props) => {
     try {
       await suspendPortal(linkData.confirmHeader);
       setIsDeactivate(true);
-      setTimeout(() => (location.href = url), 10000);
+      setTimeout(() => (window.location.href = url), 10000);
     } catch (e) {
       toastr.error(e);
     }

packages/login/src/client/App.tsx

@@ -35,15 +35,9 @@ const App: React.FC<ILoginProps> = (props) => {
     <MobxProvider {...loginStore}>
       <SimpleNav {...props} />
       <Routes>
-        <Route path="/login/error">
+        <Route path="/login/error" element={<InvalidRoute />} />
-          <InvalidRoute />
+        <Route path="/login/code" element={<CodeLogin {...props} />} />
-        </Route>
+        <Route path="/login" element={<Login {...props} />} />
-        <Route path="/login/code">
-          <CodeLogin {...props} />
-        </Route>
-        <Route path="/login">
-          <Login {...props} />
-        </Route>
       </Routes>
     </MobxProvider>
   );