Web: Added 'Recover Access Modal Dialog' to the unavailable portal page.

packages/client/public/locales/en/PortalUnavailable.json

@@ -1,4 +1,5 @@
 {
   "PortalUnavailable": "Portal unavailable",
-  "AccessingProblem": "If you have problems accessing this portal please contact the portal administrator."
+  "AccessingProblem": "If you have problems accessing this portal please contact the portal administrator.",
+  "ContactAdministrator": "Обратитесь к администратору портала"
 }

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import ErrorContainer from "@docspace/common/components/ErrorContainer";
 import { useTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
@@ -6,6 +6,7 @@ import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { ReactSVG } from "react-svg";
 import Button from "@docspace/components/button";
+import RecoverAccessModalDialog from "login/recoverAccessModalDialog";
 
 const StyledBodyContent = styled.div`
   max-width: 480px;
@@ -28,10 +29,14 @@ const StyledBody = styled.div`
       width: 100%;
     }
   }
+
   .portal-unavailable_container {
     padding: 55px;
-    .portal-unavailable_text {
+
-      color: ${(props) => props.theme.text.disableColor};
+    .portal-unavailable_contact-text {
+      text-decoration: underline;
+      cursor: pointer;
+      margin-top: 26px;
     }
   }
 
@@ -52,11 +57,17 @@ const StyledBody = styled.div`
 
 const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
   const { t, ready } = useTranslation(["PortalUnavailable", "Common"]);
+  const [isVisible, setIsVisible] = useState();
 
   const onClick = () => {
     onLogoutClick();
   };
-
+  const onClickToContact = () => {
+    setIsVisible(true);
+  };
+  const onCloseDialog = () => {
+    setIsVisible(false);
+  };
   return (
     <StyledBody theme={theme}>
       <ReactSVG
@@ -64,13 +75,23 @@ const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
         src={logoUrl}
         beforeInjection={(svg) => {}}
       />
-
+      <RecoverAccessModalDialog
+        visible={isVisible}
+        t={t}
+        emailPlaceholderText={t("Common:RegistrationEmail")}
+        textBody={t("AccessingProblem")}
+        onClose={onCloseDialog}
+      />
       <ErrorContainer
         className="portal-unavailable_container"
         headerText={t("PortalUnavailable")}
       >
         <StyledBodyContent>
-          <Text textAlign="center" className="portal-unavailable_text">
+          <Text
+            textAlign="center"
+            className="portal-unavailable_text"
+            color={theme.text.disableColor}
+          >
             {t("AccessingProblem")}
           </Text>
           <Button
@@ -79,6 +100,14 @@ const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
             size={"medium"}
             onClick={onClick}
           />
+          <Text
+            textAlign="center"
+            className="portal-unavailable_contact-text"
+            onClick={onClickToContact}
+            color={theme.login.linkColor}
+          >
+            {t("ContactAdministrator")}
+          </Text>
         </StyledBodyContent>
       </ErrorContainer>
     </StyledBody>

packages/login/webpack.config.js

@@ -167,6 +167,8 @@ var config = {
         "./roomsLogin": "./src/RoomsLogin.jsx",
         "./codeLogin": "./src/CodeLogin.jsx",
         "./moreLogin": "./src/sub-components/more-login.js",
+        "./recoverAccessModalDialog":
+          "./src/sub-components/recover-access-modal-dialog.js",
       },
       shared: {
         ...deps,