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
+
+
+
+
+ {/* @ts-ignore */}
+
+ CSS
+
+
+
+
+ {/* @ts-ignore */}
+
+ JavaScript
+
+
+
+
+
+
+
+ );
+};
+
+export default inject(
+ ({ oauthStore, auth }: { auth: any; oauthStore: OAuthStoreProps }) => {
+ const { setPreviewDialogVisible, bufferSelection } = oauthStore;
+
+ const { theme } = auth.settingsStore;
+
+ return {
+ setPreviewDialogVisible,
+ client: bufferSelection,
+ theme,
+ };
+ }
+)(observer(PreviewDialog));
diff --git a/packages/client/src/store/OAuthStore.ts b/packages/client/src/store/OAuthStore.ts
index cfb530de11..eb697b0fa0 100644
--- a/packages/client/src/store/OAuthStore.ts
+++ b/packages/client/src/store/OAuthStore.ts
@@ -38,6 +38,9 @@ export interface OAuthStoreProps {
infoDialogVisible: boolean;
setInfoDialogVisible: (value: boolean) => void;
+ previewDialogVisible: boolean;
+ setPreviewDialogVisible: (value: boolean) => void;
+
deleteDialogVisible: boolean;
setDeleteDialogVisible: (value: boolean) => void;
@@ -102,6 +105,7 @@ class OAuthStore implements OAuthStoreProps {
itemCount: number = 0;
infoDialogVisible: boolean = false;
+ previewDialogVisible: boolean = false;
deleteDialogVisible: boolean = false;
selection: string[] = [];
@@ -128,6 +132,10 @@ class OAuthStore implements OAuthStoreProps {
this.infoDialogVisible = value;
};
+ setPreviewDialogVisible = (value: boolean) => {
+ this.previewDialogVisible = value;
+ };
+
setDeleteDialogVisible = (value: boolean) => {
this.deleteDialogVisible = value;
};
@@ -240,7 +248,7 @@ class OAuthStore implements OAuthStoreProps {
const newClient = await addClient(client);
runInAction(() => {
- this.clients.unshift(newClient);
+ this.clients = [{ ...newClient }, ...this.clients];
});
} catch (e) {
console.log(e);
@@ -260,8 +268,6 @@ class OAuthStore implements OAuthStoreProps {
creatorAvatar: this.clients[idx].creatorAvatar,
creatorDisplayName: this.clients[idx].creatorDisplayName,
};
-
- console.log(this.clients[idx]);
});
}
} catch (e) {
@@ -332,6 +338,7 @@ class OAuthStore implements OAuthStoreProps {
const onDelete = () => {
this.setInfoDialogVisible(false);
+ this.setPreviewDialogVisible(false);
if (!isGroupContext) {
this.setBufferSelection(clientId);
}
@@ -341,11 +348,19 @@ class OAuthStore implements OAuthStoreProps {
const onShowInfo = () => {
this.setBufferSelection(clientId);
+ this.setPreviewDialogVisible(false);
this.setInfoDialogVisible(true);
};
+ const onShowPreview = () => {
+ this.setBufferSelection(clientId);
+ this.setInfoDialogVisible(false);
+ this.setPreviewDialogVisible(true);
+ };
+
const onEnable = async (status: boolean) => {
this.setInfoDialogVisible(false);
+ this.setPreviewDialogVisible(false);
if (isGroupContext) {
try {
const actions: Promise[] = [];
@@ -382,7 +397,7 @@ class OAuthStore implements OAuthStoreProps {
key: "auth-button",
icon: CodeReactSvgUrl,
label: "Auth button",
- onClick: () => console.log(clientId),
+ onClick: onShowPreview,
};
const infoOption = {
diff --git a/packages/common/api/oauth/index.ts b/packages/common/api/oauth/index.ts
index f814842a96..76a69d4a01 100644
--- a/packages/common/api/oauth/index.ts
+++ b/packages/common/api/oauth/index.ts
@@ -92,7 +92,7 @@ export const changeClientStatus = async (
await request({
method: "patch",
url: `/clients/${clientId}/activation`,
- data: { body: status },
+ data: { status },
});
};
@@ -149,12 +149,9 @@ export const onOAuthSubmit = (
) => {
const formData = new FormData();
- // console.log(window.location.search);
-
formData.append("client_id", clientId);
formData.append("state", clientState);
- formData.append("scope", "accounts:write");
- // formData.append("scope", scope.join(","));
+ formData.append("scope", scope.join(","));
return request({
method: "post",
diff --git a/public/images/onlyoffice.dark.react.svg b/public/images/onlyoffice.dark.react.svg
new file mode 100644
index 0000000000..9bd0316358
--- /dev/null
+++ b/public/images/onlyoffice.dark.react.svg
@@ -0,0 +1,5 @@
+
diff --git a/public/images/onlyoffice.light.react.svg b/public/images/onlyoffice.light.react.svg
new file mode 100644
index 0000000000..f437566aae
--- /dev/null
+++ b/public/images/onlyoffice.light.react.svg
@@ -0,0 +1,5 @@
+