From 8d809b53031360c8957ed2315f1992739e0d98f8 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Mon, 5 Sep 2022 16:35:10 +0300
Subject: [PATCH] Web: Added logout Button.

---
 .../src/pages/PortalUnavailable/index.js      | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/pages/PortalUnavailable/index.js b/packages/client/src/pages/PortalUnavailable/index.js
index 864b39e049..f102bc0492 100644
--- a/packages/client/src/pages/PortalUnavailable/index.js
+++ b/packages/client/src/pages/PortalUnavailable/index.js
@@ -5,9 +5,15 @@ import Text from "@docspace/components/text";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { ReactSVG } from "react-svg";
+import Button from "@docspace/components/button";
 
 const StyledBodyContent = styled.div`
   max-width: 480px;
+  text-align: center;
+  button {
+    margin-top: 24px;
+    max-width: 320px;
+  }
 `;
 const StyledBody = styled.div`
   display: flex;
@@ -44,9 +50,13 @@ const StyledBody = styled.div`
   }
 `;
 
-const PortalUnavailable = ({ theme, logoUrl }) => {
-  const { t, ready } = useTranslation("PortalUnavailable");
-  console.log("logoUrl", logoUrl);
+const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
+  const { t, ready } = useTranslation(["PortalUnavailable", "Common"]);
+
+  const onClick = () => {
+    onLogoutClick();
+  };
+
   return (
     <StyledBody theme={theme}>
       <ReactSVG
@@ -63,16 +73,24 @@ const PortalUnavailable = ({ theme, logoUrl }) => {
           <Text textAlign="center" className="portal-unavailable_text">
             {t("AccessingProblem")}
           </Text>
+          <Button
+            scale
+            label={t("Common:LogoutButton")}
+            size={"medium"}
+            onClick={onClick}
+          />
         </StyledBodyContent>
       </ErrorContainer>
     </StyledBody>
   );
 };
 
-export default inject(({ auth }) => {
+export default inject(({ auth, profileActionsStore }) => {
+  const { onLogoutClick } = profileActionsStore;
   const { theme, logoUrl } = auth.settingsStore;
   return {
     logoUrl,
     theme,
+    onLogoutClick,
   };
 })(observer(PortalUnavailable));