Web:Client:OAUth: add preview
This commit is contained in:
parent
f6dca051ac
commit
a34bedef1e
@ -1,6 +1,32 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
//@ts-ignore
|
||||
import Box from "@docspace/components/box";
|
||||
import { hugeMobile, tablet } from "@docspace/components/utils/device";
|
||||
|
||||
const Container = styled.div`
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 350px 350px;
|
||||
|
||||
gap: 16px;
|
||||
|
||||
.preview-container {
|
||||
margin-top: 16px;
|
||||
|
||||
width: fit-content;
|
||||
min-width: 350px;
|
||||
height: fit-content;
|
||||
|
||||
border: 1px solid #a3aeae;
|
||||
border-radius: 6px;
|
||||
|
||||
padding: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const FormContainer = styled.div`
|
||||
max-width: 350px;
|
||||
|
||||
display: flex;
|
||||
@ -85,12 +111,51 @@ const CheckboxRaw = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const Frame = styled(Box)`
|
||||
margin-top: 16px;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
max-width: auto;
|
||||
|
||||
padding: 0 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const CategorySubHeader = styled.div`
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
|
||||
@media ${tablet} {
|
||||
&:not(&.copy-window-code) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media ${hugeMobile} {
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export {
|
||||
Container,
|
||||
FormContainer,
|
||||
BlockContainer,
|
||||
HeaderRaw,
|
||||
InputGroup,
|
||||
InputRaw,
|
||||
CheckboxGroup,
|
||||
CheckboxRaw,
|
||||
Frame,
|
||||
CategorySubHeader,
|
||||
};
|
||||
|
@ -54,3 +54,9 @@ export interface ClientFormProps {
|
||||
|
||||
regenerateSecret?: (clientId: string) => Promise<string>;
|
||||
}
|
||||
|
||||
export interface PreviewProps {
|
||||
clientId: string;
|
||||
redirectURI: string;
|
||||
scopes: string[];
|
||||
}
|
||||
|
@ -0,0 +1,98 @@
|
||||
import React from "react";
|
||||
|
||||
//@ts-ignore
|
||||
import Loaders from "@docspace/common/components/Loaders";
|
||||
|
||||
//@ts-ignore
|
||||
import Box from "@docspace/components/box";
|
||||
//@ts-ignore
|
||||
import Textarea from "@docspace/components/textarea";
|
||||
//@ts-ignore
|
||||
import TabContainer from "@docspace/components/tabs-container";
|
||||
//@ts-ignore
|
||||
import SocialButton from "@docspace/components/social-button";
|
||||
|
||||
import ImagesLogoSvgUrl from "PUBLIC_DIR/images/logo/leftmenu.svg?url";
|
||||
|
||||
import { PreviewProps } from "../ClientForm.types";
|
||||
import { Frame, CategorySubHeader } from "../ClientForm.styled";
|
||||
|
||||
const Preview = ({ clientId, redirectURI, scopes }: PreviewProps) => {
|
||||
const getAuthLink = () => {
|
||||
const origin = window.location.origin;
|
||||
const path = "/oauth2/authorize";
|
||||
|
||||
const params: { [key: string]: string } = {
|
||||
response_type: "code",
|
||||
client_id: clientId,
|
||||
redirect_uri: redirectURI,
|
||||
scope: scopes[0],
|
||||
code_challenge_method: "S256",
|
||||
code_challenge: "ZX8YUY6qL0EweJXhjDug0S2XuKI8beOWb1LGujmgfuQ",
|
||||
};
|
||||
|
||||
const paramsString = [];
|
||||
|
||||
for (let key in params) {
|
||||
const str = `${key}=${params[key]}`;
|
||||
|
||||
paramsString.push(str);
|
||||
}
|
||||
|
||||
const link = `${origin}${path}?${paramsString.join("&")}`;
|
||||
|
||||
return link;
|
||||
};
|
||||
|
||||
const onDocSpaceLogin = () => {
|
||||
const url = getAuthLink();
|
||||
|
||||
window.open(
|
||||
url,
|
||||
"login",
|
||||
"width=800,height=500,status=no,toolbar=no,menubar=no,resizable=yes,scrollbars=no"
|
||||
);
|
||||
};
|
||||
|
||||
const preview = (
|
||||
<Frame>
|
||||
<SocialButton
|
||||
iconName={ImagesLogoSvgUrl}
|
||||
label={"Sign in with DocSpace"}
|
||||
onClick={onDocSpaceLogin}
|
||||
/>
|
||||
</Frame>
|
||||
);
|
||||
|
||||
const codeBlock = "123";
|
||||
|
||||
const code = (
|
||||
<>
|
||||
<CategorySubHeader className="copy-window-code">
|
||||
{"Copy window code"}
|
||||
</CategorySubHeader>
|
||||
<Textarea value={codeBlock} />
|
||||
</>
|
||||
);
|
||||
|
||||
const dataTabs = [
|
||||
{
|
||||
key: "preview",
|
||||
title: "Preview",
|
||||
content: preview,
|
||||
},
|
||||
{
|
||||
key: "code",
|
||||
title: "Code",
|
||||
content: code,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="preview-container">
|
||||
<TabContainer elements={dataTabs} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Preview;
|
@ -17,8 +17,14 @@ import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
|
||||
|
||||
import CheckboxComponent from "./components/Checkbox";
|
||||
|
||||
import { CheckboxGroup, Container, InputGroup } from "./ClientForm.styled";
|
||||
import {
|
||||
Container,
|
||||
FormContainer,
|
||||
CheckboxGroup,
|
||||
InputGroup,
|
||||
} from "./ClientForm.styled";
|
||||
import { ClientFormProps } from "./ClientForm.types";
|
||||
import Preview from "./components/Preview";
|
||||
|
||||
const ClientForm = ({
|
||||
id,
|
||||
@ -255,6 +261,7 @@ const ClientForm = ({
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<FormContainer>
|
||||
<Block>
|
||||
<BlockHeader header={"Basic info"} helpButtonText="" />
|
||||
<InputGroup>
|
||||
@ -409,6 +416,14 @@ const ClientForm = ({
|
||||
onClick={onCancelClick}
|
||||
/>
|
||||
</div>
|
||||
</FormContainer>
|
||||
{id && (
|
||||
<Preview
|
||||
clientId={clientId}
|
||||
redirectURI={form.redirectUrl}
|
||||
scopes={checkedScopes}
|
||||
/>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user