From caf5158c0e13ca57a555b33e8c3c034a5c3a9f61 Mon Sep 17 00:00:00 2001 From: Darya Umrikhina Date: Fri, 19 Jul 2024 14:50:18 +0400 Subject: [PATCH] Login:Src:Components: add GreetingContainers --- .../GreetingCleateUserContainer.styled.tsx | 73 +++++++++++ .../GreetingContainer/GreetingContainer.tsx | 69 +++++++++++ .../GreetingCreateUserContainer.tsx | 106 ++++++++++++++++ .../GreetingLoginContainer.tsx | 116 ++++++++++++++++++ .../components/GreetingContainer/index.tsx | 29 +++++ 5 files changed, 393 insertions(+) create mode 100644 packages/login/src/components/GreetingContainer/GreetingCleateUserContainer.styled.tsx create mode 100644 packages/login/src/components/GreetingContainer/GreetingContainer.tsx create mode 100644 packages/login/src/components/GreetingContainer/GreetingCreateUserContainer.tsx create mode 100644 packages/login/src/components/GreetingContainer/GreetingLoginContainer.tsx create mode 100644 packages/login/src/components/GreetingContainer/index.tsx diff --git a/packages/login/src/components/GreetingContainer/GreetingCleateUserContainer.styled.tsx b/packages/login/src/components/GreetingContainer/GreetingCleateUserContainer.styled.tsx new file mode 100644 index 0000000000..dc23457025 --- /dev/null +++ b/packages/login/src/components/GreetingContainer/GreetingCleateUserContainer.styled.tsx @@ -0,0 +1,73 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +import { mobile, tablet } from "@docspace/shared/utils"; +import styled from "styled-components"; + +const DESKTOP_WIDTH = 384; +const TABLET_WIDTH = 480; + +export const GreetingContainer = styled.div` + display: flex; + flex-direction: column; + align-items: left; + height: 100%; + width: ${DESKTOP_WIDTH}px; + + margin-bottom: 32px; + + @media ${tablet} { + width: 100%; + max-width: ${TABLET_WIDTH}px; + } + + .tooltip { + p { + text-align: center; + } + + @media ${mobile} { + padding: 0 25px; + } + } + + .portal-logo { + width: 100%; + padding-bottom: 16px; + height: 26.56px; + display: flex; + align-items: center; + justify-content: center; + + .injected-svg { + height: 26.56px; + } + + @media ${mobile} { + display: none; + } + } +`; diff --git a/packages/login/src/components/GreetingContainer/GreetingContainer.tsx b/packages/login/src/components/GreetingContainer/GreetingContainer.tsx new file mode 100644 index 0000000000..5dbf170d0e --- /dev/null +++ b/packages/login/src/components/GreetingContainer/GreetingContainer.tsx @@ -0,0 +1,69 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +/* eslint-disable @next/next/no-img-element */ + +"use client"; + +import React, { useLayoutEffect, useState } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { useSearchParams } from "next/navigation"; +import { useTheme } from "styled-components"; + +import { Text } from "@docspace/shared/components/text"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; +import { WhiteLabelLogoType } from "@docspace/shared/enums"; +import { getLogoUrl } from "@docspace/shared/utils/common"; + +import { GreetingContainersProps, TConfirmLinkParams } from "@/types"; +import { DEFAULT_PORTAL_TEXT, DEFAULT_ROOM_TEXT } from "@/utils/constants"; +import { getInvitationLinkData } from "@/utils"; + +export const GreetingContainer = ({ + greetingSettings, + welcomeTitle, +}: GreetingContainersProps) => { + const { t } = useTranslation(["Wizard, Login, Confirm"]); + const theme = useTheme(); + + const logoUrl = getLogoUrl(WhiteLabelLogoType.LoginPage, !theme.isBase); + + return ( + <> + greeting-logo + + {welcomeTitle + ? t(`${welcomeTitle}`, { productName: PRODUCT_NAME }) + : greetingSettings} + + + ); +}; diff --git a/packages/login/src/components/GreetingContainer/GreetingCreateUserContainer.tsx b/packages/login/src/components/GreetingContainer/GreetingCreateUserContainer.tsx new file mode 100644 index 0000000000..e1adbac4d2 --- /dev/null +++ b/packages/login/src/components/GreetingContainer/GreetingCreateUserContainer.tsx @@ -0,0 +1,106 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +/* eslint-disable @next/next/no-img-element */ + +"use client"; + +import { Text } from "@docspace/shared/components/text"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; +import { Trans, useTranslation } from "react-i18next"; +import { useTheme } from "styled-components"; +import { getLogoUrl } from "@docspace/shared/utils"; +import { WhiteLabelLogoType } from "@docspace/shared/enums"; +import { useContext, useEffect, useState } from "react"; +import { ConfirmRouteContext } from "@/app/(root)/confirm/confirmRoute"; +import { GreetingContainer } from "./GreetingCleateUserContainer.styled"; + +// remove +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."; + +export const GreetingCleateUserContainer = ({ + type, + firstName, + lastName, + hostName, +}) => { + const { t } = useTranslation(["Confirm", "Common"]); + const theme = useTheme(); + const { roomData } = useContext(ConfirmRouteContext); + + const logoUrl = getLogoUrl(WhiteLabelLogoType.LoginPage, !theme.isBase); + + return ( + + greeting-logo + {type === "LinkInvite" && ( +
+ + {roomData.title ? ( + , + }} + /> + ) : ( + , + }} + /> + )} + +
+ )} + + ); +}; diff --git a/packages/login/src/components/GreetingContainer/GreetingLoginContainer.tsx b/packages/login/src/components/GreetingContainer/GreetingLoginContainer.tsx new file mode 100644 index 0000000000..37d71facad --- /dev/null +++ b/packages/login/src/components/GreetingContainer/GreetingLoginContainer.tsx @@ -0,0 +1,116 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +/* eslint-disable @next/next/no-img-element */ + +"use client"; + +import React, { useLayoutEffect, useState } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { useSearchParams } from "next/navigation"; +import { useTheme } from "styled-components"; + +import { Text } from "@docspace/shared/components/text"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; +import { WhiteLabelLogoType } from "@docspace/shared/enums"; +import { getLogoUrl } from "@docspace/shared/utils/common"; + +import { GreetingContainersProps, TConfirmLinkParams } from "@/types"; +import { DEFAULT_PORTAL_TEXT, DEFAULT_ROOM_TEXT } from "@/utils/constants"; +import { getInvitationLinkData } from "@/utils"; + +export const GreetingLoginContainer = ({ + greetingSettings, +}: GreetingContainersProps) => { + const { t } = useTranslation(["Login", "Wizard"]); + const theme = useTheme(); + + const logoUrl = getLogoUrl(WhiteLabelLogoType.LoginPage, !theme.isBase); + + const searchParams = useSearchParams(); + + const [invitationLinkData, setInvitationLinkData] = useState({ + email: "", + roomName: "", + firstName: "", + lastName: "", + type: "", + }); + + useLayoutEffect(() => { + if (!searchParams) return; + + const encodeString = searchParams.get("loginData"); + if (!encodeString) return; + + const queryParams = getInvitationLinkData(encodeString); + if (!queryParams) return; + + setInvitationLinkData(queryParams); + }, [searchParams]); + + const { type, roomName, firstName, lastName } = invitationLinkData; + + return ( + <> + greeting-logo + {type !== "invitation" && ( + + {greetingSettings} + + )} + + {type === "invitation" && ( +
+ + , + }} + /> + +
+ )} + + ); +}; diff --git a/packages/login/src/components/GreetingContainer/index.tsx b/packages/login/src/components/GreetingContainer/index.tsx new file mode 100644 index 0000000000..987180bf44 --- /dev/null +++ b/packages/login/src/components/GreetingContainer/index.tsx @@ -0,0 +1,29 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +export { GreetingCleateUserContainer } from "./GreetingCreateUserContainer"; +export { GreetingLoginContainer } from "./GreetingLoginContainer"; +export { GreetingContainer } from "./GreetingContainer";