Client: Added terms and conditions component.

packages/client/public/locales/en/Confirm.json

@@ -30,5 +30,6 @@
   "SignUp": "Sign up",
   "SuccessDeactivate": "Your account has been successfully deactivated. In 10 seconds you will be redirected to the <1>site</1>.",
   "SuccessReactivate": "Your account has been successfully reactivated. In 10 seconds you will be redirected to the <1>portal</1>.",
-  "SuccessRemoved": "Your account has been successfully removed. In 10 seconds you will be redirected to the <1>site</1>."
+  "SuccessRemoved": "Your account has been successfully removed. In 10 seconds you will be redirected to the <1>site</1>.",
+  "TermsAndConditions": "By continuing, you understand and agree to our <1>Terms and conditions</1> and <2>Privacy statement</2>."
 }

packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js

@@ -116,6 +116,10 @@ export const RegisterContainer = styled.div`
     .email-container{
       ${(props) => props.registrationForm && "display:none"};
     }
+
+    .terms-conditions{
+      margin: 20px 0;
+    }
     @media ${tablet} {
       width: 100%;
     }

packages/client/src/pages/Confirm/sub-components/createUser.js

@@ -74,6 +74,7 @@ import LanguageComboboxWrapper from "./LanguageCombobox";
 import withCultureNames from "SRC_DIR/HOCs/withCultureNames";
 
 import { setCookie } from "@docspace/shared/utils/cookie";
+import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 
 const DEFAULT_ROOM_TEXT =
   "<strong>{{firstName}} {{lastName}}</strong> invites you to join the room <strong>{{roomName}}</strong> for secure document collaboration.";
@@ -473,6 +474,37 @@ const CreateUserForm = (props) => {
       }
     : {};
 
+  const termsConditionsComponent = (
+    <div className="terms-conditions">
+      <Text fontSize={"12px"} textAlign="center">
+        <Trans
+          t={t}
+          ns="Confirm"
+          i18nKey="TermsAndConditions"
+          components={{
+            1: (
+              <ColorTheme
+                tag="a"
+                themeId={ThemeId.Link}
+                href={"#"}
+                target="_blank"
+                fontSize={"12px"}
+              />
+            ),
+            2: (
+              <ColorTheme
+                tag="a"
+                themeId={ThemeId.Link}
+                href={"#"}
+                target="_blank"
+                fontSize={"12px"}
+              />
+            ),
+          }}
+        />
+      </Text>
+    </div>
+  );
   return (
     <StyledPage>
       <LanguageComboboxWrapper
@@ -687,6 +719,8 @@ const CreateUserForm = (props) => {
                     />
                   </FieldContainer>
 
+                  {termsConditionsComponent}
+
                   <Button
                     className="login-button"
                     primary