diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js
index 8ee1ac9293..2d2e04d67e 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js
@@ -1,109 +1,115 @@
import React, { useState, useEffect } from "react";
import { withTranslation } from "react-i18next";
-import styled from "styled-components";
-import Box from "@docspace/components/box";
import TextInput from "@docspace/components/text-input";
-import Textarea from "@docspace/components/textarea";
import Label from "@docspace/components/label";
-import Checkbox from "@docspace/components/checkbox";
-import Button from "@docspace/components/button";
-import ComboBox from "@docspace/components/combobox";
-import Heading from "@docspace/components/heading";
import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
-import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
-
-const Container = styled.div`
- width: 100%;
- margin-top: 5px;
-`;
-
-const Property = styled.div`
- display: flex;
- align-items: center;
- gap: 16px;
- margin-bottom: 16px;
-`;
+import StyledSettingsSeparator from "SRC_DIR/pages/PortalSettings/StyledSettingsSeparator";
+import Category from "../sub-components/Category";
+import { Container, Property } from "../StyledOAuth";
const OAuthDetails = (props) => {
- const { t, setDocumentTitle, currentClient } = props;
+ const { t, setDocumentTitle, currentClient, theme } = props;
setDocumentTitle("OAuth");
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/StyledOAuth.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/StyledOAuth.js
new file mode 100644
index 0000000000..0668400969
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/StyledOAuth.js
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+ width: 100%;
+ margin-top: 5px;
+`;
+
+export const Property = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 16px;
+ width: 500px;
+`;
+
+export const StyledCategory = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 4px;
+ margin-bottom: 16px;
+ align-items: center;
+`;
+
+export const StyledTooltip = styled.div`
+ .subtitle {
+ margin-bottom: 10px;
+ }
+`;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/Category.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/Category.js
new file mode 100644
index 0000000000..2a0bf69f4f
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/Category.js
@@ -0,0 +1,59 @@
+import InfoReactSvgUrl from "PUBLIC_DIR/images/info.react.svg?url";
+import React from "react";
+import Text from "@docspace/components/text";
+import HelpButton from "@docspace/components/help-button";
+import Link from "@docspace/components/link";
+import { Base } from "@docspace/components/themes";
+import { StyledCategory, StyledTooltip } from "../StyledOAuth";
+
+const Category = (props) => {
+ const {
+ t,
+ title,
+ tooltipTitle,
+ tooltipUrl,
+ theme,
+ currentColorScheme,
+ } = props;
+
+ const tooltip = () => (
+
+
+ {tooltipTitle}
+
+ {tooltipUrl && (
+
+ {t("Common:LearnMore")}
+
+ )}
+
+ );
+
+ return (
+
+
+ {title}
+
+
+
+ );
+};
+
+Category.defaultProps = {
+ theme: Base,
+};
+
+export default Category;
diff --git a/packages/client/src/store/OAuthStore.js b/packages/client/src/store/OAuthStore.js
index 8642f4ac20..207fa4431b 100644
--- a/packages/client/src/store/OAuthStore.js
+++ b/packages/client/src/store/OAuthStore.js
@@ -2,9 +2,10 @@ import { makeAutoObservable, runInAction } from "mobx";
const clients = [...Array(5)].map((value, index) => {
return {
+ enabled: true,
id: index,
- name: `46192a5a-e19c-${index}`,
- description: "Demo description",
+ name: `7383bc80-b0ad-4fad-8850-${index}`,
+ description: "Application description",
client_id: "46192a5a-e19c-453c-aec3-50617290edbe",
client_secret: "e5ff57e4-4ce2-4dac-a265-88bc7e726684",
root_url: "https://google.com",
@@ -13,20 +14,25 @@ const clients = [...Array(5)].map((value, index) => {
"https://google.com",
"https://openidconnect.net/callback",
],
- scopes: [
- "files:write",
- "accounts:write",
- "files:read",
- "account.self:write",
- "rooms:read",
- "accounts:read",
- "account.self:read",
- "rooms:write",
- ],
- enabled: true,
+ scopes: ["accounts:write", "accounts:read"],
+ logo_uri: "https://logo2.example",
+ policy_uri: "https://policy2.example",
+ terms_uri: "https://terms2.example",
+ state: "draft",
};
});
+const scopes = [
+ "files:read",
+ "files:write",
+ "rooms:read",
+ "rooms:write",
+ "account.self:read",
+ "account.self:write",
+ "accounts:read",
+ "accounts:write",
+];
+
class OAuthStore {
clients = [];
currentClient = clients[0];