Files
openpanel/templates/tabler/settings/api.html
2024-10-25 01:44:26 +02:00

307 lines
15 KiB
HTML

{% extends 'base.html' %}
{% block content %}
<!-- Page header -->
<div class="page-header mt-0 d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Settings
</div>
<h2 class="page-title">
API
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
{% if api_status_current_value == 'on' %}
<a href="#" id="post_to_disable_api_access" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-api"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 13h5" /><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3" /><path d="M20 8v8" /><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5" /></svg>Disable API access
</a>
<button class="btn btn-transparent" type="button" onclick="getDockerInfo()">Examples</button>
<script>
function getDockerInfo() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/settings/api/endpoints", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var dockerInfo = xhr.responseText;
displayDockerInfo(dockerInfo);
}
};
xhr.send();
}
function displayDockerInfo(info) {
var dockerInfoContent = document.getElementById("dockerInfoContent");
dockerInfoContent.textContent = info;
// Show modal
var dockerInfoModal = new bootstrap.Modal(document.getElementById('dockerInfoModal'));
dockerInfoModal.show();
}
</script>
<!-- modal for available endpoints -->
<div class="modal fade" id="dockerInfoModal" tabindex="-1" aria-labelledby="dockerInfoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dockerInfoModalLabel">API Endpoints with examples</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<pre id="dockerInfoContent"></pre>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
{% if basic_auth_enabled == 'on' %}
<div class="container-xl d-flex flex-column justify-content-center">
<div class="empty">
<div class="empty-img"><svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler icons-tabler-outline icon-tabler-api-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 13h5" /><path d="M12 16v-4m0 -4h3a2 2 0 0 1 2 2v1c0 .554 -.225 1.055 -.589 1.417m-3.411 .583h-1" /><path d="M20 8v8" /><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5" /><path d="M3 3l18 18" /></svg>
</div>
<p class="empty-title">API Access is Disabled because BasicAuth is enabled</p>
<p class="empty-subtitle text-secondary">
To enable API access please first disable Basic Authentication on <a href="/settings/open-admin"> OpenAdmin Settings</a>.
</p>
<p class="empty-subtitle text-secondary">
Be sure to consult the <a href="https://dev.openpanel.co/api/#troubleshooting" target="_blank">API Documentation</a> before proceeding.
</p>
<div class="empty-action">
<a href="/settings/open-admin" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-toggle-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M2 6m0 6a6 6 0 0 1 6 -6h8a6 6 0 0 1 6 6v0a6 6 0 0 1 -6 6h-8a6 6 0 0 1 -6 -6z" /></svg>
Disable HTTP BasicAuth
</a>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='pages/api_off.js') }}" defer></script>
</div>
{% elif api_status_current_value == 'on' %}
<div class="row row-cards">
<div class="col-12">
<form id="httpRequestForm">
<div class="card">
<div class="card-header">
<h3 class="card-title">HTTP Request</h3>
</div>
<div class="card-body">
<div class="row row-cards">
<div class="mb-3 col-sm-4 col-md-2">
<div class="row g-2">
<div class="col"><label class="form-label required">Method</label></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p>Different methods should be used depending on the action.</p><p class='mb-0'>Please check the <a href='https://dev.openpanel.com/api/#Complete-list-of-API-Endpoints' target='_blank'>API documentation</a>.</p>" data-bs-html="true">?</span>
</div>
</div>
<select name='method' class="form-select">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
<option value="PATCH">PATCH</option>
</select>
</div>
<div class="mb-3 col-sm-8 col-md-10">
<div class="row g-2">
<div class="col"><label class="form-label required">URL</label></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p>Please refer to the API documentation for the specific URL to send the request to.</p><p class='mb-0'>You can find the complete list of API endpoints by clicking on 'Examples' button above.</p>" data-bs-html="true">?</span>
</div>
</div>
<div class="input-group input-group-flat">
<span class="input-group-text">
/api/
</span>
<input type="text" name="url" class="form-control ps-0" autocomplete="off">
</div>
</div>
<div id="username" class="mb-3 col-sm-6 col-md-6" style="display:none;">
<div class="row g-2">
<div class="col"><label class="form-label">Username</label></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>A username is necessary for authentication and the creation of a JWT token.</p>" data-bs-html="true">?</span>
</div>
</div>
<input type="text" name="username" class="form-control" autocomplete="off" value="{{ current_user.username }}">
</div>
<div id="password" class="mb-3 col-sm-6 col-md-6" style="display:none;">
<div class="row g-2">
<div class="col"><label class="form-label">Password</label></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>A password is required for authentication and to generate a JWT token.</p>" data-bs-html="true">?</span>
</div>
</div>
<input type="password" name="password" class="form-control" autocomplete="off">
</div>
<div id="token" class="mb-3 col-sm-12 col-md-12" style="display:none;">
<div class="row g-2">
<div class="col"><label class="form-label">Token</label></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>A token is required for authentication when making API requests.</p>" data-bs-html="true">?</span>
</div>
</div>
<input type="text" name="token" class="form-control" autocomplete="off">
</div>
</div>
<div class="row g-2">
<div class="col"><label class="form-label">Data</label></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>For POST, PUT, DELETE, and PATCH methods, add <b>key:value</b> pairs.</p>" data-bs-html="true">?</span>
</div>
</div>
<textarea class="form-control json_data" rows="5"></textarea>
</div>
<div class="card-footer text-end">
<button type="submit" id="submit_button" class="btn btn-primary">Send request</button>
<button id="working" style="display:none;" class="btn btn-primary" disabled><span class="spinner-border spinner-border-sm" role="status"></span> Working</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container-xl mt-4">
<div class="card">
<div class="card-body">
<div class="row g-2">
<div class="col"><h4>Curl command</h4></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>Execute this command from a remote server to carry out operations on OpenAdmin.</p>" data-bs-html="true">?</span>
</div>
</div>
<pre id="requestDetails">GET /api/</pre>
</div>
</div>
</div>
<div class="container-xl mt-4">
<div class="card">
<div class="card-body">
<div class="row g-2">
<div class="col"><h4>Response</h4></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>The actual output from an API call on this server.</p>" data-bs-html="true">?</span>
</div>
</div>
<pre id="responseDisplay">
{
"message": "API is working!"
}
</pre>
</div>
</div>
</div>
<div class="container-xl mt-4">
<div class="card" style="height: 30rem">
<div class="card-header" style="display: block;">
<div class="row g-2">
<div class="col"><h3 class="card-title">API logs</h3></div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>Each interaction with the API, including both requests and responses, is documented in a log file.</p>" data-bs-html="true">?</span>
</div>
</div>
</div>
<div class="card-body card-body-scrollable card-body-scrollable-shadow">
<div class="divide-y">
<pre id="log_content"></pre>
</div>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='pages/api_on.js') }}" defer></script>
{% else %}
<div class="container-xl d-flex flex-column justify-content-center">
<div class="empty">
<div class="empty-img"><svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler icons-tabler-outline icon-tabler-api-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 13h5" /><path d="M12 16v-4m0 -4h3a2 2 0 0 1 2 2v1c0 .554 -.225 1.055 -.589 1.417m-3.411 .583h-1" /><path d="M20 8v8" /><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5" /><path d="M3 3l18 18" /></svg>
</div>
<p class="empty-title">API Access Disabled</p>
<p class="empty-subtitle text-secondary">
Enable API access to create and manage users and plans.
</p>
<p class="empty-subtitle text-secondary">
Be sure to consult the <a href="https://dev.openpanel.com/api/" target="_blank">API Documentation</a> before proceeding.
</p>
<div class="empty-action">
<a href="#" id="post_to_enable_api_access" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-toggle-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M2 6m0 6a6 6 0 0 1 6 -6h8a6 6 0 0 1 6 6v0a6 6 0 0 1 -6 6h-8a6 6 0 0 1 -6 -6z" /></svg>
Enable API access
</a>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='pages/api_off.js') }}" defer></script>
</div>
{% endif %}
</div>
{% endblock %}