diff --git a/packages/client/src/pages/Confirm/sub-components/GreetingUserContainer.js b/packages/client/src/pages/Confirm/sub-components/GreetingUserContainer.js new file mode 100644 index 0000000000..ca91f81af1 --- /dev/null +++ b/packages/client/src/pages/Confirm/sub-components/GreetingUserContainer.js @@ -0,0 +1,55 @@ +import { useTranslation, Trans } from "react-i18next"; + +import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme"; +import { IconButton } from "@docspace/shared/components/icon-button"; +import { Text } from "@docspace/shared/components/text"; + +import ArrowIcon from "PUBLIC_DIR/images/arrow.left.react.svg?url"; + +const DEFAULT_CREATION_TEXT = + "A DocSpace account will be created for {{email}}. Please, complete your registration:"; + +const GreetingUserContainer = ({ + email, + onClickBack, + emailFromLink, + type, + defaultText, +}) => { + const { t } = useTranslation(["Confirm", "Common"]); + + return ( +
+
+ {type === "LinkInvite" && !emailFromLink && ( +
+ + + {t("Back")} + +
+ )} + + + {t("SignUp")} + +
+ + , + }} + /> + +
+ ); +}; + +export default GreetingUserContainer; diff --git a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js index b5813e37bb..52b938d186 100644 --- a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js +++ b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js @@ -13,21 +13,6 @@ export const StyledCreateUserContent = styled.div` } `; -export const ConfirmContainer = styled(Box)` - width: 100%; - margin: 0px auto; - - display: flex; - flex: 1fr; - flex-direction: column; - align-items: center; - gap: 32px; - - @media ${mobile} { - margin-top: 0; - } -`; - export const GreetingContainer = styled.div` display: flex; flex-direction: column; @@ -35,6 +20,8 @@ export const GreetingContainer = styled.div` height: 100%; width: ${DESKTOP_WIDTH}px; + margin-bottom: 32px; + @media ${tablet} { width: 100%; max-width: ${TABLET_WIDTH}px; @@ -65,9 +52,7 @@ export const GreetingContainer = styled.div` `; export const RegisterContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; + height: 100%; width: 100%; @@ -75,9 +60,6 @@ export const RegisterContainer = styled.div` margin: 0 8px; } - .more-label { - padding-top: 18px; - } .line { display: flex; @@ -118,11 +100,6 @@ export const RegisterContainer = styled.div` width: 100%; } - .signin-container { - width: 100%; - margin-top: 24px; - text-align: center; - } .greeting-container{ margin-bottom: 32px; p{ diff --git a/packages/client/src/pages/Confirm/sub-components/activateUser.js b/packages/client/src/pages/Confirm/sub-components/activateUser.js index ce39dcbc94..1d7c4eb21d 100644 --- a/packages/client/src/pages/Confirm/sub-components/activateUser.js +++ b/packages/client/src/pages/Confirm/sub-components/activateUser.js @@ -1,6 +1,5 @@ import React, { useState } from "react"; import { withTranslation } from "react-i18next"; -import { Text } from "@docspace/shared/components/text"; import { TextInput } from "@docspace/shared/components/text-input"; import { PasswordInput } from "@docspace/shared/components/password-input"; import { Button } from "@docspace/shared/components/button"; @@ -15,26 +14,23 @@ import { import { createPasswordHash } from "@docspace/shared/utils/common"; import { toastr } from "@docspace/shared/components/toast"; import { getPasswordErrorMessage } from "@docspace/shared/utils/getPasswordErrorMessage"; +import { FormWrapper } from "@docspace/shared/components/form-wrapper"; -import { - StyledPage, - StyledContent, - StyledBody, - StyledHeader, -} from "./StyledConfirm"; +import { StyledPage, StyledHeader } from "./StyledConfirm"; import withLoader from "../withLoader"; -const ActivateUserForm = (props) => { - const { - t, - greetingTitle, - settings, - linkData, - hashSettings, - defaultPage, - login, - } = props; +import { + GreetingContainer, + RegisterContainer, + StyledCreateUserContent, +} from "./StyledCreateUser"; +import DocspaceLogo from "SRC_DIR/components/DocspaceLogoWrapper"; +import GreetingUserContainer from "./GreetingUserContainer"; +const ActivateUserForm = (props) => { + const { t, settings, linkData, hashSettings, defaultPage, login } = props; + + const emailFromLink = linkData?.email ? linkData.email : ""; const [name, setName] = useState(linkData.firstname); const [nameValid, setNameValid] = useState(true); const [surName, setSurName] = useState(linkData.lastname); @@ -139,111 +135,119 @@ const ActivateUserForm = (props) => { return ( - - - - - {greetingTitle} - + + + + + + - {t("InviteTitle")} - + + +
+ - - - + + + - - - + + + - - - + + + -