Login:App: add licenseUrl and termsConditionsComponent

packages/login/src/app/(root)/confirm/[Invite]/_sub-components/RegistrationForm.tsx

@@ -27,7 +27,7 @@
 "use client";
 
 import { ChangeEvent, KeyboardEvent, useContext } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { TPasswordSettings } from "@docspace/shared/api/settings/types";
 import { Button, ButtonSize } from "@docspace/shared/components/button";
@@ -39,6 +39,9 @@ import {
   TextInput,
 } from "@docspace/shared/components/text-input";
 import { ALLOWED_PASSWORD_CHARACTERS } from "@docspace/shared/constants";
+import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
+import { LinkTarget } from "@docspace/shared/components/link";
+import { Text } from "@docspace/shared/components/text";
 
 import { ConfirmRouteContext } from "@/components/ConfirmRoute";
 import { GreetingUserContainer } from "@/components/GreetingContainer";
@@ -68,6 +71,9 @@ type RegistrationFormProps = {
 
   onClickBack(): void;
   onSubmit(): void;
+
+  licenseUrl: string;
+  legalTerms: string;
 };
 
 const RegistrationForm = ({
@@ -95,11 +101,46 @@ const RegistrationForm = ({
 
   onClickBack,
   onSubmit,
+
+  licenseUrl,
+  legalTerms,
 }: RegistrationFormProps) => {
   const { t } = useTranslation(["Confirm", "Common"]);
 
   const { linkData } = useContext(ConfirmRouteContext);
 
+  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={licenseUrl}
+                target={LinkTarget.blank}
+                fontSize={"12px"}
+              />
+            ),
+            2: (
+              <ColorTheme
+                tag="a"
+                themeId={ThemeId.Link}
+                href={legalTerms}
+                target={LinkTarget.blank}
+                fontSize={"12px"}
+              />
+            ),
+          }}
+        />
+      </Text>
+    </div>
+  );
+
   return (
     <div>
       <GreetingUserContainer
@@ -202,6 +243,8 @@ const RegistrationForm = ({
         />
       </FieldContainer>
 
+      {termsConditionsComponent}
+
       <Button
         className="login-button"
         primary

packages/login/src/app/(root)/confirm/[Invite]/page.client.tsx

@@ -80,6 +80,8 @@ import RegistrationForm from "./_sub-components/RegistrationForm";
 export type CreateUserFormProps = {
   userNameRegex: string;
   passwordHash: TPasswordHash;
+  licenseUrl: string;
+  legalTerms: string;
   defaultPage?: string;
   passwordSettings?: TPasswordSettings;
   capabilities?: TCapabilities;
@@ -98,6 +100,8 @@ const CreateUserForm = (props: CreateUserFormProps) => {
     thirdPartyProviders,
     firstName,
     lastName,
+    licenseUrl,
+    legalTerms,
   } = props;
   const { linkData, roomData } = useContext(ConfirmRouteContext);
   const { t, i18n } = useTranslation(["Confirm", "Common"]);
@@ -510,6 +514,8 @@ const CreateUserForm = (props: CreateUserFormProps) => {
             passwordValid={passwordValid}
             passwordSettings={passwordSettings}
             password={password}
+            legalTerms={legalTerms}
+            licenseUrl={licenseUrl}
             onChangeFname={onChangeFname}
             onChangeSname={onChangeSname}
             onChangePassword={onChangePassword}

packages/login/src/app/(root)/confirm/[Invite]/page.tsx

@@ -91,6 +91,8 @@ async function Page({ searchParams, params }: LinkInviteProps) {
               passwordSettings={passwordSettings}
               capabilities={capabilities}
               thirdPartyProviders={thirdParty}
+              legalTerms={settings.legalTerms}
+              licenseUrl={settings.licenseUrl}
             />
           </FormWrapper>
         </>

packages/login/src/app/(root)/wizard/page.client.tsx

@@ -78,7 +78,6 @@ import { TCulturesOption, TError, TTimeZoneOption } from "@/types";
 import {
   DEFAULT_SELECT_LANGUAGE,
   DEFAULT_SELECT_TIMEZONE,
-  URL_LICENSE,
 } from "@/utils/constants";
 
 import {
@@ -98,6 +97,7 @@ type WizardFormProps = {
   culture?: string;
   wizardToken?: string;
   passwordHash?: TPasswordHash;
+  licenseUrl?: string;
 };
 
 const emailSettings = new EmailSettings();
@@ -105,6 +105,7 @@ emailSettings.allowDomainPunycode = true;
 
 function WizardForm(props: WizardFormProps) {
   const {
+    licenseUrl,
     passwordSettings,
     machineName,
     isRequiredLicense,
@@ -509,7 +510,7 @@ function WizardForm(props: WizardFormProps) {
           }
           fontSize="13px"
           target={LinkTarget.blank}
-          href={URL_LICENSE}
+          href={licenseUrl}
         >
           {t("LicenseLink")}
         </Link>

packages/login/src/app/(root)/wizard/page.tsx

@@ -72,6 +72,7 @@ async function Page() {
             isRequiredLicense={isRequiredLicense}
             portalCultures={portalCultures}
             portalTimeZones={portalTimeZones}
+            licenseUrl={objectSettings?.licenseUrl}
             culture={objectSettings?.culture}
             wizardToken={objectSettings?.wizardToken}
             passwordHash={objectSettings?.passwordHash}