Web: Added activation page redesign.

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 (
+    <div className="greeting-container">
+      <div className="back-sign-in-container">
+        {type === "LinkInvite" && !emailFromLink && (
+          <div className="back-button">
+            <IconButton size={16} iconName={ArrowIcon} onClick={onClickBack} />
+            <Text fontWeight={600} onClick={onClickBack}>
+              {t("Back")}
+            </Text>
+          </div>
+        )}
+
+        <Text fontWeight={600} fontSize={"16px"}>
+          {t("SignUp")}
+        </Text>
+      </div>
+      <Text>
+        <Trans
+          t={t}
+          i18nKey={"AccountWillBeCreated"}
+          ns="Confirm"
+          defaults={DEFAULT_CREATION_TEXT}
+          values={{
+            email,
+          }}
+          components={{
+            1: <ColorTheme tag="a" themeId={ThemeId.Link} isHovered={false} />,
+          }}
+        />
+      </Text>
+    </div>
+  );
+};
+
+export default GreetingUserContainer;

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{

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,16 +135,21 @@ const ActivateUserForm = (props) => {
 
   return (
     <StyledPage>
-      <StyledContent>
-        <StyledBody>
+      <StyledCreateUserContent>
         <StyledHeader>
-            <Text fontSize="23px" fontWeight="700" className="title">
-              {greetingTitle}
-            </Text>
-
-            <Text className="subtitle">{t("InviteTitle")}</Text>
+          <GreetingContainer>
+            <DocspaceLogo className="docspace-logo" />
+          </GreetingContainer>
         </StyledHeader>
 
+        <FormWrapper>
+          <RegisterContainer>
+            <form className="auth-form-container">
+              <GreetingUserContainer
+                emailFromLink={!!emailFromLink}
+                email={emailFromLink}
+              />
+
               <FieldContainer
                 className="form-field"
                 isVertical={true}
@@ -193,7 +194,7 @@ const ActivateUserForm = (props) => {
               </FieldContainer>
 
               <FieldContainer
-            className="form-field"
+                className="form-field password-field"
                 isVertical={true}
                 labelVisible={false}
                 hasError={isPasswordErrorShow && !passwordValid}
@@ -234,16 +235,19 @@ const ActivateUserForm = (props) => {
               </FieldContainer>
 
               <Button
+                scale
                 className="confirm-button"
                 primary
-            size="normal"
+                size="medium"
                 label={t("LoginRegistryButton")}
                 tabIndex={5}
                 onClick={onSubmit}
                 isDisabled={isLoading}
               />
-        </StyledBody>
-      </StyledContent>
+            </form>
+          </RegisterContainer>
+        </FormWrapper>
+      </StyledCreateUserContent>
     </StyledPage>
   );
 };
@@ -260,7 +264,6 @@ export default inject(({ authStore, settingsStore }) => {
   return {
     theme,
     settings: passwordSettings,
-    greetingTitle: greetingSettings,
     hashSettings,
     defaultPage,
     login: authStore.login,

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 =
   "<strong>{{firstName}} {{lastName}}</strong> invites you to join the room <strong>{{roomName}}</strong> for secure document collaboration.";
 const DEFAULT_PORTAL_TEXT =
   "<strong>{{firstName}} {{lastName}}</strong> invites you to join the room <strong>{{roomName}}</strong> 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 (
-    <div className="greeting-container">
-      <div className="back-sign-in-container">
-        {type === "LinkInvite" && !emailFromLink && (
-          <div className="back-button">
-            <IconButton size={16} iconName={ArrowIcon} onClick={onClickBack} />
-            <Text fontWeight={600} onClick={onClickBack}>
-              {t("Back")}
-            </Text>
-          </div>
-        )}
-
-        <Text fontWeight={600} fontSize={"16px"}>
-          {t("SignUp")}
-        </Text>
-      </div>
-      <Text>
-        <Trans
-          t={t}
-          i18nKey={"AccountWillBeCreated"}
-          ns="Confirm"
-          defaults={DEFAULT_CREATION_TEXT}
-          values={{
-            email,
-          }}
-          components={{
-            1: <ColorTheme tag="a" themeId={ThemeId.Link} isHovered={false} />,
-          }}
+    <GreetingUserContainer
+      type={type}
+      emailFromLink={!!emailFromLink}
+      email={email}
+      onClickBack={onClickBack}
     />
-      </Text>
-    </div>
   );
 };
 const CreateUserForm = (props) => {
@@ -461,7 +432,6 @@ const CreateUserForm = (props) => {
   return (
     <StyledPage>
       <StyledCreateUserContent>
-        <ConfirmContainer>
         <GreetingContainer>
           <DocspaceLogo className="docspace-logo" />
           {linkData.type === "LinkInvite" && (
@@ -547,7 +517,6 @@ const CreateUserForm = (props) => {
                   <div>
                     <RegistrationFormGreeting
                       email={email}
-                        t={t}
                       setRegistrationForm={setRegistrationForm}
                       type={linkData.type}
                       emailFromLink={emailFromLink}
@@ -695,7 +664,6 @@ const CreateUserForm = (props) => {
             )}
           </RegisterContainer>
         </FormWrapper>
-        </ConfirmContainer>
       </StyledCreateUserContent>
     </StyledPage>
   );