Skip to content

Commit 622777f

Browse files
ralyodioralyodio
committed
Add API documentation components and refactor API keys page
1 parent b1d7563 commit 622777f

File tree

9 files changed

+1066
-840
lines changed

9 files changed

+1066
-840
lines changed

‎public/js/components/api-keys/api-auth.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { BaseComponent } from '../base-component.js';
2+
3+
/**
4+
* API Authentication component
5+
* Displays the authentication information for the API
6+
*/
7+
export class ApiAuth extends BaseComponent {
8+
/**
9+
* Create a new API authentication component
10+
*/
11+
constructor() {
12+
super();
13+
}
14+
15+
/**
16+
* Get the component's styles
17+
* @returns {string} - CSS styles
18+
*/
19+
getStyles() {
20+
return `
21+
:host {
22+
display: block;
23+
}
24+
25+
p {
26+
margin-bottom: var(--spacing-md);
27+
color: var(--text-secondary);
28+
}
29+
30+
.code-block {
31+
background-color: var(--surface-variant);
32+
padding: var(--spacing-md);
33+
border-radius: var(--border-radius-md);
34+
overflow-x: auto;
35+
margin-bottom: var(--spacing-md);
36+
}
37+
38+
pre {
39+
margin: 0;
40+
font-family: monospace;
41+
color: var(--text-primary);
42+
}
43+
`;
44+
}
45+
46+
/**
47+
* Get the component's template
48+
* @returns {string} - HTML template
49+
*/
50+
getTemplate() {
51+
return `
52+
<p>All API endpoints require authentication using an API key. You can create and manage your API keys in the <a href="/api-keys.html">API Keys</a> section.</p>
53+
<p>Include your API key in the request headers using one of the following methods:</p>
54+
55+
<div class="code-block">
56+
<pre>Authorization: Bearer pfs_your_api_key_here</pre>
57+
</div>
58+
59+
<p>Or for backward compatibility:</p>
60+
61+
<div class="code-block">
62+
<pre>X-API-Key: [email protected]</pre>
63+
</div>
64+
`;
65+
}
66+
}
67+
68+
// Define the custom element
69+
if (!customElements.get('api-auth')) {
70+
customElements.define('api-auth', ApiAuth);
71+
console.log('API auth component registered');
72+
}

‎public/js/components/api-keys/api-delete-key.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { ApiEndpointBase } from './api-endpoint-base.js';
2+
3+
/**
4+
* DELETE /api/1/api-keys/:id endpoint component
5+
* Displays the documentation for the DELETE /api/1/api-keys/:id endpoint
6+
*/
7+
export class ApiDeleteKey extends ApiEndpointBase {
8+
/**
9+
* Create a new DELETE /api/1/api-keys/:id endpoint component
10+
*/
11+
constructor() {
12+
super();
13+
this._method = 'DELETE';
14+
this._path = '/api/1/api-keys/:id';
15+
this._description = 'Deletes an API key.';
16+
this._parameters = [];
17+
this._responseExample = `{
18+
"success": true
19+
}`;
20+
this._codeExamples = {
21+
curl: `curl -X DELETE "https://api.example.com/api/1/api-keys/YOUR_API_KEY_ID" \\
22+
-H "Authorization: Bearer YOUR_JWT_TOKEN"`,
23+
fetch: `fetch('https://api.example.com/api/1/api-keys/YOUR_API_KEY_ID', {
24+
method: 'DELETE',
25+
headers: {
26+
'Authorization': 'Bearer YOUR_JWT_TOKEN'
27+
}
28+
})
29+
.then(response => response.json())
30+
.then(data => console.log(data))
31+
.catch(error => console.error('Error:', error));`,
32+
nodejs: `const axios = require('axios');
33+
34+
axios.delete('https://api.example.com/api/1/api-keys/YOUR_API_KEY_ID', {
35+
headers: {
36+
'Authorization': 'Bearer YOUR_JWT_TOKEN'
37+
}
38+
})
39+
.then(response => {
40+
console.log(response.data);
41+
})
42+
.catch(error => {
43+
console.error('Error:', error);
44+
});`,
45+
python: `import requests
46+
47+
headers = {
48+
'Authorization': 'Bearer YOUR_JWT_TOKEN'
49+
}
50+
51+
response = requests.delete('https://api.example.com/api/1/api-keys/YOUR_API_KEY_ID',
52+
headers=headers)
53+
result = response.json()
54+
print(result)`,
55+
php: `$curl = curl_init();
56+
57+
curl_setopt_array($curl, [
58+
CURLOPT_URL => "https://api.example.com/api/1/api-keys/YOUR_API_KEY_ID",
59+
CURLOPT_RETURNTRANSFER => true,
60+
CURLOPT_CUSTOMREQUEST => "DELETE",
61+
CURLOPT_HTTPHEADER => [
62+
"Authorization: Bearer YOUR_JWT_TOKEN"
63+
],
64+
]);
65+
66+
$response = curl_exec($curl);
67+
$err = curl_error($curl);
68+
69+
curl_close($curl);
70+
71+
if ($err) {
72+
echo "Error: " . $err;
73+
} else {
74+
$result = json_decode($response, true);
75+
print_r($result);
76+
}`,
77+
ruby: `require 'net/http'
78+
require 'uri'
79+
require 'json'
80+
81+
uri = URI.parse('https://api.example.com/api/1/api-keys/YOUR_API_KEY_ID')
82+
request = Net::HTTP::Delete.new(uri)
83+
request['Authorization'] = 'Bearer YOUR_JWT_TOKEN'
84+
85+
response = Net::HTTP.start(uri.hostname, uri.port, use_ssl: uri.scheme == 'https') do |http|
86+
http.request(request)
87+
end
88+
89+
result = JSON.parse(response.body)
90+
puts result`
91+
};
92+
}
93+
94+
/**
95+
* Get the component's template
96+
* @returns {string} - HTML template
97+
*/
98+
getTemplate() {
99+
return `
100+
<div class="endpoint-header">
101+
<span class="http-method method-${this._method.toLowerCase()}">${this._method}</span>
102+
<span class="endpoint-path">${this._path}</span>
103+
</div>
104+
105+
<div class="endpoint-description">
106+
<p>${this._description}</p>
107+
</div>
108+
109+
${this.renderParametersTable(this._parameters)}
110+
111+
${this.renderCodeExamples(this._codeExamples)}
112+
113+
${this.renderResponse(this._responseExample)}
114+
`;
115+
}
116+
}
117+
118+
// Define the custom element
119+
if (!customElements.get('api-delete-key')) {
120+
customElements.define('api-delete-key', ApiDeleteKey);
121+
console.log('API DELETE key component registered');
122+
}

‎public/js/components/api-keys/api-docs.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { BaseComponent } from '../base-component.js';
2+
import './api-auth.js';
3+
import './api-get-keys.js';
4+
import './api-post-key.js';
5+
import './api-put-key.js';
6+
import './api-delete-key.js';
7+
8+
/**
9+
* API Documentation component
10+
* Displays the API documentation with all endpoints
11+
*/
12+
export class ApiDocs extends BaseComponent {
13+
/**
14+
* Create a new API documentation component
15+
*/
16+
constructor() {
17+
super();
18+
}
19+
20+
/**
21+
* Get the component's styles
22+
* @returns {string} - CSS styles
23+
*/
24+
getStyles() {
25+
return `
26+
:host {
27+
display: block;
28+
}
29+
30+
h1 {
31+
margin-bottom: var(--spacing-lg);
32+
}
33+
34+
.api-section {
35+
margin-bottom: var(--spacing-xxl);
36+
}
37+
38+
h2 {
39+
margin-bottom: var(--spacing-md);
40+
color: var(--text-primary);
41+
}
42+
`;
43+
}
44+
45+
/**
46+
* Get the component's template
47+
* @returns {string} - HTML template
48+
*/
49+
getTemplate() {
50+
return `
51+
<h1>API Documentation</h1>
52+
53+
<div class="api-section">
54+
<h2>Authentication</h2>
55+
<api-auth></api-auth>
56+
</div>
57+
58+
<div class="api-section">
59+
<h2>API Key Management</h2>
60+
<api-get-keys></api-get-keys>
61+
<api-post-key></api-post-key>
62+
<api-put-key></api-put-key>
63+
<api-delete-key></api-delete-key>
64+
</div>
65+
`;
66+
}
67+
}
68+
69+
// Define the custom element
70+
if (!customElements.get('api-docs')) {
71+
customElements.define('api-docs', ApiDocs);
72+
console.log('API docs component registered');
73+
}

0 commit comments

Comments
 (0)