Web: Added 'Recover Access Modal Dialog' to the unavailable portal page.
This commit is contained in:
parent
d016efea48
commit
ead45257f1
@ -1,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
"PortalUnavailable": "Portal unavailable",
|
"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": "Обратитесь к администратору портала"
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import ErrorContainer from "@docspace/common/components/ErrorContainer";
|
import ErrorContainer from "@docspace/common/components/ErrorContainer";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
@ -6,6 +6,7 @@ import styled from "styled-components";
|
|||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { ReactSVG } from "react-svg";
|
import { ReactSVG } from "react-svg";
|
||||||
import Button from "@docspace/components/button";
|
import Button from "@docspace/components/button";
|
||||||
|
import RecoverAccessModalDialog from "login/recoverAccessModalDialog";
|
||||||
|
|
||||||
const StyledBodyContent = styled.div`
|
const StyledBodyContent = styled.div`
|
||||||
max-width: 480px;
|
max-width: 480px;
|
||||||
@ -28,10 +29,14 @@ const StyledBody = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.portal-unavailable_container {
|
.portal-unavailable_container {
|
||||||
padding: 55px;
|
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 PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
|
||||||
const { t, ready } = useTranslation(["PortalUnavailable", "Common"]);
|
const { t, ready } = useTranslation(["PortalUnavailable", "Common"]);
|
||||||
|
const [isVisible, setIsVisible] = useState();
|
||||||
|
|
||||||
const onClick = () => {
|
const onClick = () => {
|
||||||
onLogoutClick();
|
onLogoutClick();
|
||||||
};
|
};
|
||||||
|
const onClickToContact = () => {
|
||||||
|
setIsVisible(true);
|
||||||
|
};
|
||||||
|
const onCloseDialog = () => {
|
||||||
|
setIsVisible(false);
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<StyledBody theme={theme}>
|
<StyledBody theme={theme}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
@ -64,13 +75,23 @@ const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
|
|||||||
src={logoUrl}
|
src={logoUrl}
|
||||||
beforeInjection={(svg) => {}}
|
beforeInjection={(svg) => {}}
|
||||||
/>
|
/>
|
||||||
|
<RecoverAccessModalDialog
|
||||||
|
visible={isVisible}
|
||||||
|
t={t}
|
||||||
|
emailPlaceholderText={t("Common:RegistrationEmail")}
|
||||||
|
textBody={t("AccessingProblem")}
|
||||||
|
onClose={onCloseDialog}
|
||||||
|
/>
|
||||||
<ErrorContainer
|
<ErrorContainer
|
||||||
className="portal-unavailable_container"
|
className="portal-unavailable_container"
|
||||||
headerText={t("PortalUnavailable")}
|
headerText={t("PortalUnavailable")}
|
||||||
>
|
>
|
||||||
<StyledBodyContent>
|
<StyledBodyContent>
|
||||||
<Text textAlign="center" className="portal-unavailable_text">
|
<Text
|
||||||
|
textAlign="center"
|
||||||
|
className="portal-unavailable_text"
|
||||||
|
color={theme.text.disableColor}
|
||||||
|
>
|
||||||
{t("AccessingProblem")}
|
{t("AccessingProblem")}
|
||||||
</Text>
|
</Text>
|
||||||
<Button
|
<Button
|
||||||
@ -79,6 +100,14 @@ const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
|
|||||||
size={"medium"}
|
size={"medium"}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
/>
|
/>
|
||||||
|
<Text
|
||||||
|
textAlign="center"
|
||||||
|
className="portal-unavailable_contact-text"
|
||||||
|
onClick={onClickToContact}
|
||||||
|
color={theme.login.linkColor}
|
||||||
|
>
|
||||||
|
{t("ContactAdministrator")}
|
||||||
|
</Text>
|
||||||
</StyledBodyContent>
|
</StyledBodyContent>
|
||||||
</ErrorContainer>
|
</ErrorContainer>
|
||||||
</StyledBody>
|
</StyledBody>
|
||||||
|
@ -167,6 +167,8 @@ var config = {
|
|||||||
"./roomsLogin": "./src/RoomsLogin.jsx",
|
"./roomsLogin": "./src/RoomsLogin.jsx",
|
||||||
"./codeLogin": "./src/CodeLogin.jsx",
|
"./codeLogin": "./src/CodeLogin.jsx",
|
||||||
"./moreLogin": "./src/sub-components/more-login.js",
|
"./moreLogin": "./src/sub-components/more-login.js",
|
||||||
|
"./recoverAccessModalDialog":
|
||||||
|
"./src/sub-components/recover-access-modal-dialog.js",
|
||||||
},
|
},
|
||||||
shared: {
|
shared: {
|
||||||
...deps,
|
...deps,
|
||||||
|
Loading…
Reference in New Issue
Block a user