Web: Client: OAuth: Fixed DTO and client view styles
This commit is contained in:
parent
e173c5932d
commit
a4d69eebe8
@ -1,84 +1,73 @@
|
||||
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 (
|
||||
<>
|
||||
<Container>
|
||||
<Category
|
||||
t={t}
|
||||
title={"Basic info"}
|
||||
tooltipTitle={"Test"}
|
||||
tooltipUrl={""}
|
||||
currentColorScheme={theme}
|
||||
/>
|
||||
<Property>
|
||||
<Label htmlFor="name" text="Name:" title="Fill the client name" />
|
||||
<Label htmlFor="name" text="App name:" title="Fill app name" />
|
||||
<TextInput id="name" value={currentClient.name} />
|
||||
</Property>
|
||||
<Property>
|
||||
<Label htmlFor="icon" text="App icon:" title="Fill app icon" />
|
||||
<TextInput id="icon" value={currentClient.logo_uri} />
|
||||
</Property>
|
||||
<Property>
|
||||
<Label
|
||||
htmlFor="description"
|
||||
text="Description:"
|
||||
title="Fill the client description"
|
||||
title="Fill description"
|
||||
/>
|
||||
<TextInput id="description" value={currentClient.description} scale />
|
||||
<TextInput id="description" value={currentClient.description} />
|
||||
</Property>
|
||||
<StyledSettingsSeparator />
|
||||
<Category
|
||||
t={t}
|
||||
title={"Client ID"}
|
||||
tooltipTitle={"Test"}
|
||||
tooltipUrl={""}
|
||||
currentColorScheme={theme}
|
||||
/>
|
||||
<Property>
|
||||
<Label htmlFor="id" text="Id:" title="Client id" />
|
||||
<TextInput id="id" value={currentClient.client_id} isDisabled scale />
|
||||
<Label htmlFor="id" text="Client ID:" title="Client ID" />
|
||||
<TextInput id="id" value={currentClient.client_id} isDisabled />
|
||||
</Property>
|
||||
<Property>
|
||||
<Label htmlFor="secret" text="Secret:" title="Client secret" />
|
||||
<TextInput
|
||||
id="secret"
|
||||
value={currentClient.client_secret}
|
||||
isDisabled
|
||||
scale
|
||||
/>
|
||||
<TextInput id="secret" value={currentClient.client_secret} isDisabled />
|
||||
</Property>
|
||||
<Property>
|
||||
<Label htmlFor="rootUrl" text="Root url:" title="Root url" />
|
||||
<TextInput
|
||||
id="rootUrl"
|
||||
value={currentClient.root_url}
|
||||
isReadOnly
|
||||
scale
|
||||
<StyledSettingsSeparator />
|
||||
<Category
|
||||
t={t}
|
||||
title={"OAuth urls"}
|
||||
tooltipTitle={"Test"}
|
||||
tooltipUrl={""}
|
||||
currentColorScheme={theme}
|
||||
/>
|
||||
</Property>
|
||||
<Property>
|
||||
<Label
|
||||
htmlFor="redirectUris"
|
||||
text="Redirect uris:"
|
||||
title="Redirect uris"
|
||||
/>
|
||||
<TextInput
|
||||
id="redirectUris"
|
||||
value={currentClient.redirect_uris}
|
||||
isReadOnly
|
||||
scale
|
||||
/>
|
||||
<TextInput id="redirectUris" value={currentClient.redirect_uris} />
|
||||
</Property>
|
||||
<Property>
|
||||
<Label
|
||||
@ -86,24 +75,41 @@ const OAuthDetails = (props) => {
|
||||
text="Allowed origins:"
|
||||
title="Allowed origins"
|
||||
/>
|
||||
<TextInput
|
||||
id="allowedOrigins"
|
||||
value={currentClient.allowed_origins}
|
||||
isReadOnly
|
||||
scale
|
||||
/>
|
||||
<TextInput id="allowedOrigins" value={currentClient.allowed_origins} />
|
||||
</Property>
|
||||
<StyledSettingsSeparator />
|
||||
<Category
|
||||
t={t}
|
||||
title={"Access scopes"}
|
||||
tooltipTitle={"Test"}
|
||||
tooltipUrl={""}
|
||||
currentColorScheme={theme}
|
||||
/>
|
||||
<Property>
|
||||
<Label htmlFor="scopes" text="Scopes:" title="Scopes" />
|
||||
<TextInput
|
||||
id="scopes"
|
||||
value={currentClient.scopes}
|
||||
isReadOnly
|
||||
scale
|
||||
<TextInput id="scopes" value={currentClient.scopes} isReadOnly />
|
||||
</Property>
|
||||
<StyledSettingsSeparator />
|
||||
<Category
|
||||
t={t}
|
||||
title={"Support and legal info"}
|
||||
tooltipTitle={"Test"}
|
||||
tooltipUrl={""}
|
||||
currentColorScheme={theme}
|
||||
/>
|
||||
<Property>
|
||||
<Label htmlFor="rootUrl" text="Website URL:" title="Root url" />
|
||||
<TextInput id="rootUrl" value={currentClient.root_url} />
|
||||
</Property>
|
||||
<Property>
|
||||
<Label htmlFor="policy" text="Privacy policy URL:" title="Policy" />
|
||||
<TextInput id="policy" value={currentClient.policy_uri} />
|
||||
</Property>
|
||||
<Property>
|
||||
<Label htmlFor="terms" text="Terms of Service URL:" title="Terms" />
|
||||
<TextInput id="terms" value={currentClient.terms_uri} />
|
||||
</Property>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
@ -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 = () => (
|
||||
<StyledTooltip>
|
||||
<Text className={tooltipUrl ? "subtitle" : ""} fontSize="12px">
|
||||
{tooltipTitle}
|
||||
</Text>
|
||||
{tooltipUrl && (
|
||||
<Link
|
||||
fontSize="12px"
|
||||
target="_blank"
|
||||
isHovered
|
||||
href={tooltipUrl}
|
||||
color={currentColorScheme.main.accent}
|
||||
>
|
||||
{t("Common:LearnMore")}
|
||||
</Link>
|
||||
)}
|
||||
</StyledTooltip>
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledCategory>
|
||||
<Text fontSize="16px" fontWeight="700">
|
||||
{title}
|
||||
</Text>
|
||||
<HelpButton
|
||||
iconName={InfoReactSvgUrl}
|
||||
displayType="dropdown"
|
||||
place="right"
|
||||
offsetRight={0}
|
||||
getContent={tooltip}
|
||||
tooltipColor={theme.client.settings.security.owner.tooltipColor}
|
||||
/>
|
||||
</StyledCategory>
|
||||
);
|
||||
};
|
||||
|
||||
Category.defaultProps = {
|
||||
theme: Base,
|
||||
};
|
||||
|
||||
export default Category;
|
@ -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];
|
||||
|
Loading…
Reference in New Issue
Block a user