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")}
-
+
+
+
-
+
+
+
+
+
);
};
@@ -260,7 +264,6 @@ export default inject(({ authStore, settingsStore }) => {
return {
theme,
settings: passwordSettings,
- greetingTitle: greetingSettings,
hashSettings,
defaultPage,
login: authStore.login,
diff --git a/packages/client/src/pages/Confirm/sub-components/createUser.js b/packages/client/src/pages/Confirm/sub-components/createUser.js
index 28b99e4ec7..4fcd187436 100644
--- a/packages/client/src/pages/Confirm/sub-components/createUser.js
+++ b/packages/client/src/pages/Confirm/sub-components/createUser.js
@@ -1,5 +1,4 @@
import SsoReactSvgUrl from "PUBLIC_DIR/images/sso.react.svg?url";
-import ArrowIcon from "PUBLIC_DIR/images/arrow.left.react.svg?url";
import React, { useEffect, useState, useCallback } from "react";
import { withTranslation, Trans } from "react-i18next";
@@ -38,23 +37,19 @@ import withLoader from "../withLoader";
import { StyledPage } from "./StyledConfirm";
import {
- ConfirmContainer,
GreetingContainer,
RegisterContainer,
StyledCreateUserContent,
} from "./StyledCreateUser";
+import GreetingUserContainer from "./GreetingUserContainer";
const DEFAULT_ROOM_TEXT =
"{{firstName}} {{lastName}} invites you to join the room {{roomName}} for secure document collaboration.";
const DEFAULT_PORTAL_TEXT =
"{{firstName}} {{lastName}} invites you to join the room {{roomName}} for secure document collaboration.";
-const DEFAULT_CREATION_TEXT =
- "A DocSpace account will be created for {{email}}. Please, complete your registration:";
-
const RegistrationFormGreeting = ({
email,
- t,
setRegistrationForm,
type,
emailFromLink,
@@ -64,36 +59,12 @@ const RegistrationFormGreeting = ({
};
return (
-
-
- {type === "LinkInvite" && !emailFromLink && (
-
-
-
- {t("Back")}
-
-
- )}
-
-
- {t("SignUp")}
-
-
-
- ,
- }}
- />
-
-
+
);
};
const CreateUserForm = (props) => {
@@ -461,14 +432,13 @@ const CreateUserForm = (props) => {
return (
-
-
-
- {linkData.type === "LinkInvite" && (
-
-
-
+
+ {linkData.type === "LinkInvite" && (
+
+
+ {
defaults={
roomName ? DEFAULT_ROOM_TEXT : DEFAULT_PORTAL_TEXT
}
- values={{
- firstName: user.firstName,
- lastName: user.lastName,
- ...(roomName
- ? { roomName }
- : { spaceAddress: window.location.host }),
- }}
- components={{
- 1: ,
- }}
- />
-
-
- )}
-
+ values={{
+ firstName: user.firstName,
+ lastName: user.lastName,
+ ...(roomName
+ ? { roomName }
+ : { spaceAddress: window.location.host }),
+ }}
+ components={{
+ 1: ,
+ }}
+ />
+
+
+ )}
+
-
+
-