From dc1274fb88992ac3a8884818586e368bc25c2aaa Mon Sep 17 00:00:00 2001
From: Timofey Boyko <timofey.boyko@onlyoffice.com>
Date: Mon, 25 Sep 2023 17:03:25 +0300
Subject: [PATCH] Web:Client:PortalSettings: add OAuth empty page

---
 packages/client/public/locales/en/OAuth.json  |  8 +++++
 .../EmptyScreen/EmptyScreen.types.ts          |  3 ++
 .../sub-components/EmptyScreen/index.tsx      | 23 ++++++++++++
 .../RegisterNewButton.types.ts                |  3 ++
 .../RegisterNewButton/index.tsx               | 27 ++++++++++++++
 public/images/empty_screen_oauth.svg          | 35 +++++++++++++++++++
 6 files changed, 99 insertions(+)
 create mode 100644 packages/client/public/locales/en/OAuth.json
 create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/EmptyScreen.types.ts
 create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/index.tsx
 create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/RegisterNewButton.types.ts
 create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/index.tsx
 create mode 100644 public/images/empty_screen_oauth.svg

diff --git a/packages/client/public/locales/en/OAuth.json b/packages/client/public/locales/en/OAuth.json
new file mode 100644
index 0000000000..dc3e1aec61
--- /dev/null
+++ b/packages/client/public/locales/en/OAuth.json
@@ -0,0 +1,8 @@
+{
+  "OAuth": "OAuth",
+  "NoOAuthAppHeader": "No OAuth applications",
+  "NoOAuthAppDescription": "OAuth applications are used to access the ONLYOFFICE DocSpace API",
+  "RegisterNewApp": "Register a new application",
+  "NewApp": "New application",
+  "EditApp": "Edit application"
+}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/EmptyScreen.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/EmptyScreen.types.ts
new file mode 100644
index 0000000000..8d8e9043b8
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/EmptyScreen.types.ts
@@ -0,0 +1,3 @@
+export interface EmptyScreenProps {
+  t: any;
+}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/index.tsx
new file mode 100644
index 0000000000..9f239763b4
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/index.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+// @ts-ignore
+import EmptyScreenContainer from "@docspace/components/empty-screen-container";
+
+import EmptyScreenOauthSvgUrl from "PUBLIC_DIR/images/empty_screen_oauth.svg?url";
+
+import RegisterNewButton from "../RegisterNewButton";
+
+import { EmptyScreenProps } from "./EmptyScreen.types";
+const OAuthEmptyScreen = ({ t }: EmptyScreenProps) => {
+  return (
+    <EmptyScreenContainer
+      imageSrc={EmptyScreenOauthSvgUrl}
+      imageAlt={"Empty oauth list"}
+      headerText={t("NoOAuthAppHeader")}
+      subheadingText={t("NoOAuthAppDescription")}
+      buttons={<RegisterNewButton t={t} />}
+    />
+  );
+};
+
+export default OAuthEmptyScreen;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/RegisterNewButton.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/RegisterNewButton.types.ts
new file mode 100644
index 0000000000..fa37b11113
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/RegisterNewButton.types.ts
@@ -0,0 +1,3 @@
+export interface RegisterNewButtonProps {
+  t: any;
+}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/index.tsx
new file mode 100644
index 0000000000..38e89981f5
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { isMobile } from "react-device-detect";
+
+import Button from "@docspace/components/button";
+
+import { RegisterNewButtonProps } from "./RegisterNewButton.types";
+
+const RegisterNewButton = ({ t }: RegisterNewButtonProps) => {
+  const navigate = useNavigate();
+
+  const onClick = () => {
+    navigate("create");
+  };
+
+  return (
+    <Button
+      //@ts-ignore
+      size={isMobile ? "normal" : "small"}
+      label={t("RegisterNewApp")}
+      primary={true}
+      onClick={onClick}
+    />
+  );
+};
+
+export default RegisterNewButton;
diff --git a/public/images/empty_screen_oauth.svg b/public/images/empty_screen_oauth.svg
new file mode 100644
index 0000000000..1eaf187820
--- /dev/null
+++ b/public/images/empty_screen_oauth.svg
@@ -0,0 +1,35 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12.5" y="0.5" width="74" height="99" rx="7.5" fill="white" stroke="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50 18C54.1403 18 57.8937 19.6765 60.6086 22.3914C63.3235 25.1063 65 28.8597 65 33C65 37.1403 63.3167 40.8937 60.6086 43.6086C57.8937 46.3235 54.1403 48 50 48C45.8597 48 42.1063 46.3235 39.3914 43.6086C36.6765 40.8937 35 37.1403 35 33C35 28.8597 36.6833 25.1063 39.3914 22.3914C42.1063 19.6833 45.8597 18 50 18Z" fill="#EFEFEF" stroke="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.2717 24.7898C51.6122 26.8239 54.7995 29.7841 57 29.5C57.019 29.2955 56.9998 28.4943 56.9998 28.2898C56.9998 24.8125 53.8633 22 49.9998 22C46.1298 22 42.9998 24.8182 42.9998 28.2898C42.9998 28.5284 42.9683 29.267 42.9999 29.5C45.0993 29.4716 48.6086 27.6989 50.2717 24.7898Z" fill="#AAAAAA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.3001 29.7267C54.9906 30.0585 51.679 27.3044 50.2721 24.9219C48.5267 28.3198 44.8899 29.813 42.6799 29.8329C43.0914 33.5029 46.2039 36.3566 49.9801 36.3566C53.8027 36.3632 56.9351 33.4498 57.3001 29.7267Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.1257 39.8672L53.3115 39.6216C53.3978 39.5088 53.3978 39.4557 53.3978 39.1836V38.3939V34.5049C52.3757 35.0424 51.221 35.3411 49.9866 35.3411C48.7522 35.3411 47.5975 35.0358 46.5754 34.5049V34.6177V38.374V39.177C46.5754 39.4491 46.5754 39.5022 46.6617 39.615L46.8475 39.8605C47.6705 40.9489 48.6063 42.4338 49.4823 43.6151C49.6947 43.9005 49.8407 44.0332 50 44C50.1659 44.0398 50.3053 43.9005 50.5176 43.6151C51.387 42.4404 52.3027 40.9556 53.1257 39.8672Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.9197 40.314L52.7324 40.5754C51.903 41.7339 51.4147 42.7583 50.5318 44.0086C50.3177 44.3124 50.1706 44.4608 50.01 44.4184C49.8428 44.4608 49.7023 44.3124 49.4883 44.0086C48.6054 42.7512 48.1037 41.748 47.2742 40.5824L47.087 40.321C47 40.2009 47 40.1444 47 39.8548V39C43.9833 39.5651 40.4465 40.847 38.5 42.5C41.1221 45.8556 45.5686 48 50.01 48C54.4247 48 58.8846 45.8203 61.5 42.5C59.5669 40.8328 56.0167 39.5793 53 39V39.8407C53.0067 40.1374 53.0067 40.1939 52.9197 40.314Z" fill="#D9F4FF" stroke="#333333"/>
+<path d="M47 36V40M53 36V40" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.0034 21.5C52.0714 21.5 53.9481 22.3368 55.3056 23.6944C56.6632 25.0519 57.5 26.9286 57.5 28.9966C57.5 31.0644 56.6633 32.941 55.3061 34.2985C53.9402 35.6578 52.0695 36.5 50.0034 36.5C47.9365 36.5 46.0594 35.6572 44.7011 34.2989C43.3426 32.9404 42.5 31.0701 42.5 28.9966C42.5 26.9289 43.3366 25.0523 44.6939 23.6948C46.0587 22.3366 47.9358 21.5 50.0034 21.5Z" stroke="#333333"/>
+<path d="M57.3528 29.4942C56.145 29.6668 54.7381 29.1226 53.4373 28.2333C52.2295 27.4104 51.088 26.2755 50.285 25.154C49.5019 26.395 48.4666 27.3506 47.3782 28.0541C45.7522 29.1027 43.9803 29.6004 42.6663 29.6137" stroke="#333333" stroke-linejoin="round"/>
+<path d="M22.5 59C22.5 57.6193 23.6193 56.5 25 56.5H75C76.3807 56.5 77.5 57.6193 77.5 59V61C77.5 62.3807 76.3807 63.5 75 63.5H25.0001C23.6194 63.5 22.5001 62.3807 22.5001 61L22.5 59Z" fill="#D9F4FF" stroke="#333333"/>
+<path d="M32 60L68 60" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.5 83C22.5 81.6193 23.6193 80.5 25 80.5H75C76.3807 80.5 77.5 81.6193 77.5 83V85C77.5 86.3807 76.3807 87.5 75 87.5H25.0001C23.6194 87.5 22.5001 86.3807 22.5001 85L22.5 83Z" fill="url(#paint0_linear_12_7487)" stroke="#333333"/>
+<path d="M32 84L68 84" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.5 71C22.5 69.6193 23.6193 68.5 25 68.5H75C76.3807 68.5 77.5 69.6193 77.5 71V73C77.5 74.3807 76.3807 75.5 75 75.5H25.0001C23.6194 75.5 22.5001 74.3807 22.5001 73L22.5 71Z" fill="#D9F4FF" stroke="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 73C34.5523 73 35 72.5481 35 72C35 71.4477 34.5481 71 34 71C33.4477 71 33 71.4477 33 72C32.9958 72.5481 33.4477 73 34 73Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38 73C38.5523 73 39 72.5481 39 72C39 71.4477 38.5523 71 38 71C37.4477 71 37 71.4477 37 72C36.9958 72.5481 37.4477 73 38 73Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42 73C42.5523 73 43 72.5481 43 72C43 71.4477 42.5481 71 42 71C41.4477 71 41 71.4477 41 72C40.9958 72.5481 41.4477 73 42 73Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46 73C46.5523 73 47 72.5481 47 72C47 71.4477 46.5481 71 46 71C45.4477 71 45 71.4477 45 72C44.9958 72.5481 45.4477 73 46 73Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58 73C58.5523 73 59 72.5481 59 72C59 71.4477 58.5481 71 58 71C57.4477 71 57 71.4477 57 72C56.9958 72.5481 57.4477 73 58 73Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50 73C50.5523 73 51 72.5481 51 72C51 71.4477 50.5481 71 50 71C49.4477 71 49 71.4477 49 72C48.9958 72.5481 49.4477 73 50 73Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62 73C62.5523 73 63 72.5481 63 72C63 71.4477 62.5481 71 62 71C61.4477 71 61 71.4477 61 72C60.9958 72.5481 61.4477 73 62 73Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54 73C54.5523 73 55 72.5481 55 72C55 71.4477 54.5481 71 54 71C53.4477 71 53 71.4477 53 72C52.9958 72.5481 53.4477 73 54 73Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66 73C66.5523 73 67 72.5481 67 72C67 71.4477 66.5481 71 66 71C65.4477 71 65 71.4477 65 72C64.9958 72.5481 65.4477 73 66 73Z" fill="#333333"/>
+<path d="M66.8333 6C66.8333 6.82843 66.1617 7.5 65.3333 7.5C64.5048 7.5 63.8333 6.82843 63.8333 6C63.8333 5.17157 64.5048 4.5 65.3333 4.5C66.1617 4.5 66.8333 5.17157 66.8333 6Z" stroke="#333333"/>
+<path d="M73.4998 6C73.4998 6.82843 72.8282 7.5 71.9998 7.5C71.1713 7.5 70.4998 6.82843 70.4998 6C70.4998 5.17157 71.1713 4.5 71.9998 4.5C72.8282 4.5 73.4998 5.17157 73.4998 6Z" stroke="#333333"/>
+<path d="M80.1665 6C80.1665 6.82685 79.4934 7.5 78.6665 7.5C77.8407 7.5 77.1665 6.82128 77.1665 6C77.1665 5.17315 77.8397 4.5 78.6665 4.5C79.4934 4.5 80.1665 5.17315 80.1665 6Z" stroke="#333333"/>
+<path d="M87 11H12V12H87V11Z" fill="#333333"/>
+<defs>
+<linearGradient id="paint0_linear_12_7487" x1="22.0001" y1="79.6875" x2="24.1607" y2="95.4022" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF8E3D"/>
+<stop offset="1" stop-color="#FF6F3D"/>
+</linearGradient>
+</defs>
+</svg>