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",
|
||||
"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 { 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>
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user