Login:App:TenantList: move client components and page styles
This commit is contained in:
parent
4e0982de91
commit
b578931b84
@ -0,0 +1,76 @@
|
||||
// (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 { IconButton } from "@docspace/shared/components/icon-button";
|
||||
import { deleteCookie, getCookie } from "@docspace/shared/utils/cookie";
|
||||
|
||||
import ArrowRightSvrUrl from "PUBLIC_DIR/images/arrow.right.react.svg?url";
|
||||
import DefaultLogoUrl from "PUBLIC_DIR/images/logo/leftmenu.svg?url";
|
||||
import { TPortal } from "@/types";
|
||||
|
||||
type ItemProps = {
|
||||
portal: TPortal;
|
||||
baseDomain: string;
|
||||
};
|
||||
|
||||
const Item = ({ portal, baseDomain }: ItemProps) => {
|
||||
const name = portal.portalName.includes(baseDomain)
|
||||
? portal.portalName
|
||||
: `${portal.portalName}.${baseDomain}`;
|
||||
|
||||
const onClick = () => {
|
||||
const redirectUrl = getCookie("x-redirect-authorization-uri")?.replace(
|
||||
window.location.origin,
|
||||
name,
|
||||
);
|
||||
deleteCookie("x-redirect-authorization-uri");
|
||||
|
||||
window.open(`${portal.portalLink}&referenceUrl=${redirectUrl}`, "_self");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="item" onClick={onClick}>
|
||||
<div className="info">
|
||||
<img className="favicon" alt="Portal favicon" src={DefaultLogoUrl} />
|
||||
<Text fontWeight={600} fontSize="14px" lineHeight="16px" truncate>
|
||||
{name.replace("http://", "").replace("https://", "")}
|
||||
</Text>
|
||||
</div>
|
||||
<IconButton
|
||||
iconName={ArrowRightSvrUrl}
|
||||
size={16}
|
||||
className="icon-button"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Item;
|
||||
71
packages/login/src/app/(root)/tenant-list/page.client.tsx
Normal file
71
packages/login/src/app/(root)/tenant-list/page.client.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
// (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
|
||||
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { Button } from "@docspace/shared/components/button";
|
||||
|
||||
import { TPortal } from "@/types";
|
||||
|
||||
import StyledTenantList from "./page.styled";
|
||||
import Item from "./_sub-components/Item";
|
||||
|
||||
type TenantListProps = {
|
||||
baseDomain: string;
|
||||
clientId: string;
|
||||
portals: TPortal[];
|
||||
};
|
||||
|
||||
const TenantList = ({ portals, clientId, baseDomain }: TenantListProps) => {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation(["TenantList"]);
|
||||
|
||||
const goToLogin = () => {
|
||||
router.push(`/?type=oauth2&client_id=${clientId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledTenantList>
|
||||
<Text className="more-accounts">{t("MorePortals")}</Text>
|
||||
<div className="items-list">
|
||||
{portals.map((item) => (
|
||||
<Item portal={item} key={item.portalName} baseDomain={baseDomain} />
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
onClick={goToLogin}
|
||||
label={t("BackToSignIn")}
|
||||
className="back-button"
|
||||
/>
|
||||
</StyledTenantList>
|
||||
);
|
||||
};
|
||||
|
||||
export default TenantList;
|
||||
106
packages/login/src/app/(root)/tenant-list/page.styled.ts
Normal file
106
packages/login/src/app/(root)/tenant-list/page.styled.ts
Normal file
@ -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
|
||||
|
||||
"use client";
|
||||
|
||||
import { mobile } from "@docspace/shared/utils";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledTenantList = styled.div`
|
||||
margin-top: -16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.more-accounts {
|
||||
color: ${(props) => props.theme.text.disableColor};
|
||||
text-align: center;
|
||||
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.items-list {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
|
||||
border: 1px solid ${(props) => props.theme.oauth.infoDialog.separatorColor};
|
||||
border-radius: 6px;
|
||||
|
||||
div:last-child {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
maxwidth: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 59px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 0 16px;
|
||||
|
||||
border-bottom: 1px solid
|
||||
${(props) => props.theme.oauth.infoDialog.separatorColor};
|
||||
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: ${(props) =>
|
||||
props.theme.dropDownItem.hoverBackgroundColor};
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
max-width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.favicon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.back-button {
|
||||
margin: 32px auto 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledTenantList;
|
||||
@ -1,78 +0,0 @@
|
||||
import { mobile } from "@docspace/shared/utils";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledTenantList = styled.div`
|
||||
margin-top: -16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.more-accounts {
|
||||
color: ${(props) => props.theme.text.disableColor};
|
||||
text-align: center;
|
||||
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.items-list {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
|
||||
border: 1px solid ${(props) => props.theme.oauth.infoDialog.separatorColor};
|
||||
border-radius: 6px;
|
||||
|
||||
div:last-child {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
maxwidth: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 59px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 0 16px;
|
||||
|
||||
border-bottom: 1px solid
|
||||
${(props) => props.theme.oauth.infoDialog.separatorColor};
|
||||
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: ${(props) =>
|
||||
props.theme.dropDownItem.hoverBackgroundColor};
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
max-width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.favicon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.back-button {
|
||||
margin: 32px auto 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledTenantList;
|
||||
@ -1,12 +0,0 @@
|
||||
type TPortal = { portalLink: string; portalName: string };
|
||||
|
||||
export type TenantListProps = {
|
||||
baseDomain: string;
|
||||
clientId: string;
|
||||
portals: TPortal[];
|
||||
};
|
||||
|
||||
export type ItemProps = {
|
||||
portal: TPortal;
|
||||
baseDomain: string;
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||
import { deleteCookie, getCookie } from "@docspace/shared/utils/cookie";
|
||||
|
||||
import ArrowRightSvrUrl from "PUBLIC_DIR/images/arrow.right.react.svg?url";
|
||||
import DefaultLogoUrl from "PUBLIC_DIR/images/logo/leftmenu.svg?url";
|
||||
|
||||
import { ItemProps } from "../TenantList.types";
|
||||
|
||||
const Item = ({ portal, baseDomain }: ItemProps) => {
|
||||
const name = portal.portalName.includes(baseDomain)
|
||||
? portal.portalName
|
||||
: `${portal.portalName}.${baseDomain}`;
|
||||
|
||||
const onClick = () => {
|
||||
const redirectUrl = getCookie("x-redirect-authorization-uri")?.replace(
|
||||
window.location.origin,
|
||||
name,
|
||||
);
|
||||
deleteCookie("x-redirect-authorization-uri");
|
||||
|
||||
window.open(`${portal.portalLink}&referenceUrl=${redirectUrl}`, "_self");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="item" onClick={onClick}>
|
||||
<div className="info">
|
||||
<img className="favicon" alt="Portal favicon" src={DefaultLogoUrl} />
|
||||
<Text fontWeight={600} fontSize="14px" lineHeight="16px" truncate>
|
||||
{name.replace("http://", "").replace("https://", "")}
|
||||
</Text>
|
||||
</div>
|
||||
<IconButton
|
||||
iconName={ArrowRightSvrUrl}
|
||||
size={16}
|
||||
className="icon-button"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Item;
|
||||
@ -65,6 +65,8 @@ export type TTimeZoneOption = {
|
||||
label: string;
|
||||
};
|
||||
|
||||
export type TPortal = { portalLink: string; portalName: string };
|
||||
|
||||
export type TCulturesOption =
|
||||
| {
|
||||
isBeta?: boolean;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user