Skip to content

Commit 0252d16

Browse files
deepesshdeepessh
committed
feat: added get credential pages
1 parent 4f57518 commit 0252d16

File tree

11 files changed

+3833
-163
lines changed

11 files changed

+3833
-163
lines changed

‎gatsby-config.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13+
const { createProxyMiddleware } = require("http-proxy-middleware");
14+
1315
module.exports = {
1416
siteMetadata: {
1517
pages: [
@@ -28,6 +30,14 @@ module.exports = {
2830
{
2931
path: "support/index.md",
3032
title: "Support"
33+
},
34+
{
35+
title: 'Get API Key credential',
36+
path: "/get-credential-apikey"
37+
},
38+
{
39+
title: 'Get OAuth S2S credential',
40+
path: "/get-credential-oauth"
3141
}
3242
],
3343
subPages: [
@@ -224,5 +234,26 @@ module.exports = {
224234
]
225235
},
226236
plugins: [`@adobe/gatsby-theme-aio`],
237+
developMiddleware: app => {
238+
app.use(
239+
"/console/api",
240+
createProxyMiddleware({
241+
target: "https://developer-stage.adobe.com/console/api",
242+
secure: false,
243+
changeOrigin: true,
244+
})
245+
);
246+
app.use("/templates", createProxyMiddleware({
247+
target: "https://developer-stage.adobe.com/templates",
248+
secure: false,
249+
changeOrigin: true,
250+
}));
251+
252+
app.use("/ims", createProxyMiddleware({
253+
target: "https://ims-na1-stg1.adobelogin.com/ims",
254+
secure: false,
255+
changeOrigin: true,
256+
}));
257+
},
227258
pathPrefix: process.env.PATH_PREFIX || "/developer-console/docs/"
228259
};

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@
1212
"url": "https://github.com/icaraps"
1313
},
1414
"dependencies": {
15-
"@adobe/gatsby-theme-aio": "^4.10.4",
15+
"@adobe/gatsby-theme-aio": "4.11.15-rc3",
16+
"@adobe/react-spectrum": "^3.35.1",
1617
"gatsby": "4.22.0",
18+
"http-proxy-middleware": "^3.0.0",
1719
"react": "^17.0.2",
1820
"react-dom": "^17.0.2"
1921
},

‎src/pages/credential/Credential.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.side-container {
2+
display: flex;
3+
gap: 16px;
4+
flex-direction: column;
5+
}
6+
7+
.side-header {
8+
color: var(--spectrum-global-color-gray-900);
9+
}
10+
11+
.side-documentation {
12+
color: rgb(2, 101, 220);
13+
}
14+
15+
.side-documentation:hover {
16+
color: rgb(0, 84, 182);
17+
}

‎src/pages/credential/GetCredentialApiKey.js‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import React from 'react'
2+
import { GetCredential } from '@adobe/gatsby-theme-aio/src/components/GetCredential';
3+
import creativeCloud from "./images/cc-icon.png";
4+
5+
const GetCredentialApiKey = () => {
6+
return (
7+
<GetCredential className="getCredentialContainer" templateId="664e39607dcc7c0e5a4a035b" >
8+
9+
<GetCredential.SignIn title="Get credentials" paragraph="Create unique credentials that you will use to call multiple APIs from your application." buttonText="Sign in to create credentials" />
10+
11+
<GetCredential.Form title="Get credentials" paragraph="Create unique credentials that you will use to call multiple APIs from your application." className="formClass">
12+
13+
<GetCredential.Form.CredentialName label="Credential name" description="Credential name must be unique and between 3 and 45 characters long. A project will be automatically created with the same name in Adobe Developer Console." range="45" />
14+
15+
<GetCredential.Form.AllowedOrigins label="Allowed domains (up to 5)" contextHelp={true} contextHelpHeading="What are allowed domains" placeholder="Example: www.domain-1.com, www.domain-2.com, *.my-domain.com, localhost:5000" contextHelpText="To prevent a third party from using your client ID on their own website, the use of your client ID is restricted to a list of domains that you specifically authorize." contextHelpLink="https://www.adobe.com/" contextHelpLabelForLink="Learn more in our documentation" description="Use wildcards to enter multiple subdomains (*.my-domain.com) or commas to separate multiple domains (www.domain-1.com, www.domain-2.com). During local development, you can include ports greater than 1023 with localhost (e.g. localhost:3000). Standard ports (80, 443) will be used for non-localhost domains." />
16+
17+
<GetCredential.Form.Products label="Included products and services">
18+
<GetCredential.Form.Product label="Adobe Express Embed SDK" icon={creativeCloud} />
19+
</GetCredential.Form.Products>
20+
21+
<GetCredential.Form.Downloads label="Download a personalized code sample" contextHelp={true} contextHelpHeading="Select Language">
22+
<GetCredential.Form.Download title="JavaScript" href="https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/8bab684/files/samples_q3_2023/PROD/dc-pdf-services-sdk-java-samples.zip" />
23+
<GetCredential.Form.Download title=".Net" href="/Net.zip" />
24+
<GetCredential.Form.Download title="Python" href="https://python.zip/" />
25+
<GetCredential.Form.Download title="Ruby" href="https://www.ruby.zip/" />
26+
</GetCredential.Form.Downloads>
27+
28+
<GetCredential.Form.AdobeDeveloperConsole label='By checking this box, you agree to' linkText="Adobe Developer Terms of Use" href="https://wwwimages2.adobe.com/content/dam/cc/en/legal/servicetou/Adobe-Developer-Additional-Terms_en-US_20230822.pdf" />
29+
30+
<GetCredential.Form.Side>
31+
<div style="display : flex ; gap : 16px ; flex-direction : column;">
32+
<h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >API key credential</h3>
33+
<p className="spectrum-Body spectrum-Body--sizeM">Submitting this form creates an API Key credential. The API key credential identifies your application to Adobe servers and can help accept or reject requests originating from certain domains.</p>
34+
<h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >Learn more</h3>
35+
<a className="side-documentation" style={{ color: "#0265DC" }} href='https://some_help_link'>Authentication documentation</a>
36+
<a className='side-documentation' style={{ color: "#0265DC" }} href='https://some_help_link'>Express Embed SDK documentation</a>
37+
</div>
38+
</GetCredential.Form.Side>
39+
40+
</GetCredential.Form>
41+
42+
<GetCredential.UnknownError helpLink="https://some_help_link" helpLinkText="Get Help" className="unKnownError" />
43+
44+
<GetCredential.Card title="Your credential is ready to use" paragraph="Check the downloads section of your browser for the ZIP file, or find it where you save downloads on your machine." nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" developerConsoleManage="Manage on Developer console" className="card_developer_console">
45+
46+
<GetCredential.Card.Side>
47+
<div style="display : flex ; gap : 16px ; flex-direction : column;">
48+
<h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >API key credential</h3>
49+
<p className="spectrum-Body spectrum-Body--sizeM">Submitting this form creates an API Key credential. The API key credential identifies your application to Adobe servers and can help accept or reject requests originating from certain domains.</p>
50+
<h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >Learn more</h3>
51+
<a className="side-documentation" style={{ color: "#0265DC" }} href='https://some_help_link'>Authentication documentation</a>
52+
<a className='side-documentation' style={{ color: "#0265DC" }} href='https://some_help_link'>Express Embed SDK documentation</a>
53+
</div>
54+
</GetCredential.Card.Side>
55+
56+
<GetCredential.Card.Products label="Included products and services">
57+
<GetCredential.Card.Product label="Adobe Express Embed SDK" icon={creativeCloud} />
58+
</GetCredential.Card.Products>
59+
60+
<GetCredential.Card.DevConsoleLink heading="Developer Console Project" />
61+
62+
<GetCredential.Card.CredentialDetails heading="Credential details">
63+
<GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
64+
<GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed domains" />
65+
<GetCredential.Card.CredentialDetails.OrganizationName heading="Organization" />
66+
</GetCredential.Card.CredentialDetails>
67+
68+
</GetCredential.Card>
69+
70+
<GetCredential.Return title="Previously created projects" paragraph="Select a project and access your existing credentials for Firefly - Firefly and Creative Cloud Automation." devConsoleDirection="project_overview|api_overview|credential_overview" nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" developerConsoleManage="Manage on Developer console" className="card_developer_console">
71+
72+
<GetCredential.Return.Side>
73+
<GetCredential.Return.Side.Custom>
74+
<div style={{ display: "flex", gap: "30px", flexDirection: "column", width: "100%" }}>
75+
<h3 className='spectrum-Heading spectrum-Heading--sizeM'>Welcome back</h3>
76+
<p className="spectrum-Body spectrum-Body--sizeL">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
77+
</div>
78+
</GetCredential.Return.Side.Custom>
79+
<GetCredential.Return.Side.NewCredential heading="Need another credential?" buttonLabel="Create new credential" />
80+
</GetCredential.Return.Side>
81+
82+
<GetCredential.Return.CredentialDetails heading="Credential details">
83+
<GetCredential.Return.CredentialDetails.APIKey heading="API Key" />
84+
<GetCredential.Return.CredentialDetails.AllowedOrigins heading="Allowed domains" />
85+
<GetCredential.Return.CredentialDetails.OrganizationName heading="Organization" />
86+
</GetCredential.Return.CredentialDetails>
87+
88+
<GetCredential.Return.ProjectsDropdown label="Projects" subHeading="Only your projects that contain credentials are shown" />
89+
90+
<GetCredential.Return.ManageDeveloperConsole label="Manage all your projects and credentials on Adobe Developer Console" direction='/console/projects' />
91+
92+
<GetCredential.Return.DevConsoleLink heading="Developer Console Project" />
93+
94+
<GetCredential.Return.Products label="Included products and services">
95+
<GetCredential.Return.Product label="Adobe Express Embed SDK" icon={creativeCloud} />
96+
</GetCredential.Return.Products>
97+
98+
</GetCredential.Return>
99+
100+
<GetCredential.RequestAccess
101+
title="Get credentials"
102+
paragraph="Create unique credentials that you will use to call multiple APIs from your application."
103+
>
104+
<GetCredential.RequestAccess.RestrictedAccess
105+
title="Restricted Access"
106+
buttonLabel="Request access"
107+
>
108+
<GetCredential.RequestAccess.RestrictedAccess.RestrictedAccessProducts label="Included products and services">
109+
<GetCredential.RequestAccess.RestrictedAccess.RestrictedAccessProducts.RestrictedAccessProduct label="Adobe Express Embed SDK" icon={creativeCloud} />
110+
</GetCredential.RequestAccess.RestrictedAccess.RestrictedAccessProducts>
111+
</GetCredential.RequestAccess.RestrictedAccess>
112+
<GetCredential.RequestAccess.RequestAccessSide>
113+
<div style="display : flex ; gap : 16px ; flex-direction : column;">
114+
<h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >API key credential</h3>
115+
<p className="spectrum-Body spectrum-Body--sizeM">Submitting this form creates an API Key credential. The API key credential identifies your application to Adobe servers and can help accept or reject requests originating from certain domains.</p>
116+
<h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >Learn more</h3>
117+
<a className="side-documentation" style={{ color: "#0265DC" }} href='https://some_help_link'>Authentication documentation</a>
118+
<a className='side-documentation' style={{ color: "#0265DC" }} href='https://some_help_link'>Express Embed SDK documentation</a>
119+
</div>
120+
</GetCredential.RequestAccess.RequestAccessSide>
121+
</GetCredential.RequestAccess>
122+
123+
<GetCredential.NoDeveloperAccessError title='Get Credentials' docsLinkText="How do I get developer permissions for the [Firefly - Firefly and Creative Cloud Automation API]?" docsLink="" />
124+
125+
<GetCredential.ErrorCode helpLink="Get help" title="Error code ###" description="Your personal account does not have Developer role permission to access the [Org Name, Inc.] organization in the Adobe Developer Console." buttonLabel="Contact Adobe" buttonLink="https://some_help_link" />
126+
127+
</GetCredential>
128+
129+
)
130+
}
131+
132+
export default GetCredentialApiKey;

0 commit comments

Comments
 (0)