diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts index 9e9b344b38..be6cf9624f 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts @@ -17,4 +17,5 @@ export interface OAuthProps { currentDeviceType: DeviceUnionType; infoDialogVisible?: boolean; + previewDialogVisible?: boolean; } diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx index 953ad63921..917e6e024c 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx @@ -15,6 +15,7 @@ import List from "./sub-components/List"; import { OAuthContainer } from "./StyledOAuth"; import { OAuthProps } from "./OAuth.types"; import InfoDialog from "./sub-components/InfoDialog"; +import PreviewDialog from "./sub-components/PreviewDialog"; const MIN_LOADER_TIME = 500; @@ -27,6 +28,7 @@ const OAuth = ({ fetchScopes, currentDeviceType, infoDialogVisible, + previewDialogVisible, }: OAuthProps) => { const { t } = useTranslation(["OAuth"]); @@ -83,6 +85,7 @@ const OAuth = ({ )} {infoDialogVisible && } + {previewDialogVisible && } ); }; @@ -98,6 +101,7 @@ export default inject( fetchClients, fetchScopes, infoDialogVisible, + previewDialogVisible, } = oauthStore; return { viewAs, @@ -107,6 +111,7 @@ export default inject( fetchClients, currentDeviceType, infoDialogVisible, + previewDialogVisible, fetchScopes, }; } diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx index 6c7b272976..e11e8a3470 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx @@ -70,15 +70,19 @@ const ClientForm = ({ const isEdit = !!id; const onSaveClick = async () => { - if (!id) { - setIsRequestRunning(true); + try { + if (!id) { + setIsRequestRunning(true); - await saveClient?.(form); - } else { - await updateClient?.(clientId, form); + await saveClient?.(form); + } else { + await updateClient?.(clientId, form); + } + + onCancelClick(); + } catch (e) { + console.log(e); } - - onCancelClick(); }; const onCancelClick = () => { diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx new file mode 100644 index 0000000000..b8d17ed579 --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx @@ -0,0 +1,277 @@ +import React from "react"; +import { inject, observer } from "mobx-react"; +import styled from "styled-components"; +import { useTranslation } from "react-i18next"; + +import { IClientProps } from "@docspace/common/utils/oauth/interfaces"; + +//@ts-ignore +import ModalDialog from "@docspace/components/modal-dialog"; +//@ts-ignore +import SocialButton from "@docspace/components/social-button"; +import Text from "@docspace/components/text"; +//@ts-ignore +import Textarea from "@docspace/components/textarea"; + +import OnlyofficeLight from "PUBLIC_DIR/images/onlyoffice.light.react.svg"; +import OnlyofficeDark from "PUBLIC_DIR/images/onlyoffice.dark.react.svg"; + +//@ts-ignore +import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore"; + +const StyledContainer = styled.div` + width: 100%; + height: 100%; + + box-sizing: border-box; + + display: flex; + flex-direction: column; + gap: 20px; +`; + +const StyledPreviewContainer = styled.div` + width: 100%; + height: 152px; + + box-sizing: border-box; + + border: 1px solid #242424; + + border-radius: 6px; + + display: flex; + align-items: center; + justify-content: center; + + .social-button { + max-width: 226px; + + padding: 11px 16px; + + box-sizing: border-box; + + display: flex; + gap: 16px; + + .iconWrapper { + padding: 0; + margin: 0; + } + } +`; + +const StyledBlocksContainer = styled.div` + width: 100%; + height: auto; + + display: flex; + flex-direction: column; + gap: 12px; + + .block-container { + display: flex; + flex-direction: column; + gap: 4px; + } +`; + +const htmlBlock = ` + +`; + +const styleBlock = ``; + +const linkParams = + "width=800,height=800,status=no,toolbar=no,menubar=no,resizable=yes,scrollbars=no"; + +interface PreviewDialogProps { + visible: boolean; + + setPreviewDialogVisible?: (value: boolean) => void; + client?: IClientProps; + + theme?: any; +} + +const PreviewDialog = ({ + visible, + setPreviewDialogVisible, + client, + theme, +}: PreviewDialogProps) => { + const onClose = () => setPreviewDialogVisible?.(false); + + const icon = theme.isBase ? OnlyofficeLight : OnlyofficeDark; + + const scopesString = client?.scopes.join(" "); + + const encodingScopes = encodeURI(scopesString || ""); + + const getLink = () => { + return `${window.location.origin}/oauth2/authorize?response_type=code&client_id=${client?.clientId}&redirect_uri=${client?.redirectUris[0]}&scope=${encodingScopes}&code_challenge_method=S256&code_challenge=ZX8YUY6qL0EweJXhjDug0S2XuKI8beOWb1LGujmgfuQ`; + }; + + const link = getLink(); + + const scriptBlock = ``; + + return ( + + Auth button + + + + { + window.open(link, "login", linkParams); + }} + /> + + +
+ {/* @ts-ignore */} + + HTML + +