forked from grumpydevelop/federator
530caa7ea6
- reworked plugin handling. Main now registers and keeps all connectors and based on request we select the correct one and pass it (mainly for clean async-request-handling) - added outbox functionality for mastodon - changed image-mime-type approach to retrieve mime-type from the url, this way we don't need to store the images on our server/download each image - added host for connector for better debugging - minor bug-fixes
112 lines
No EOL
4.8 KiB
HTML
112 lines
No EOL
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>API Request UI</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
|
|
<body class="flex justify-center items-center min-h-screen bg-gray-100">
|
|
<div class="w-full max-w-3xl bg-white shadow-lg rounded-lg p-6 m-6">
|
|
<h2 class="text-2xl font-semibold mb-4 text-center">API Request UI</h2>
|
|
|
|
<div id="request-container">
|
|
<!-- Request Form Template -->
|
|
<div class="request-box border p-4 rounded-lg mb-4 bg-gray-50">
|
|
<label class="block font-medium">API target link</label>
|
|
<input type="text" class="target-link-input w-full p-2 border rounded-md mb-2"
|
|
placeholder="Enter target link" value="federator/fedusers/grumpydevelop/outbox?page=0">
|
|
|
|
<label class="block font-medium">Request type</label>
|
|
<input type="text" class="request-type-input w-full p-2 border rounded-md mb-2"
|
|
placeholder="POST or GET" value="GET">
|
|
|
|
<label class="block font-medium">X-Session:</label>
|
|
<input type="text" class="session-input w-full p-2 border rounded-md mb-2"
|
|
placeholder="Enter X-Session token" value="">
|
|
|
|
<label class="block font-medium">X-Profile:</label>
|
|
<input type="text" class="profile-input w-full p-2 border rounded-md mb-2" placeholder="Enter X-Profile"
|
|
value="">
|
|
|
|
<div class="buttonContainer">
|
|
<button class="send-btn bg-blue-500 text-white px-4 py-2 rounded-md w-full hover:bg-blue-600">
|
|
Send Request
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mt-2 text-sm text-gray-700">Response:</p>
|
|
<p class="response mt-2 text-sm text-gray-700 font-mono whitespace-pre">Waiting for response</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="add-request" class="mt-4 bg-green-500 text-white px-4 py-2 rounded-md w-full hover:bg-green-600">
|
|
Add Another Request
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
function sendRequest(button) {
|
|
const container = button.parentElement.parentElement;
|
|
const targetLink = container.querySelector(".target-link-input").value;
|
|
const requestType = container.querySelector(".request-type-input").value;
|
|
const session = container.querySelector(".session-input").value;
|
|
const profile = container.querySelector(".profile-input").value;
|
|
const responseField = container.querySelector(".response");
|
|
button.parentElement.style.cursor = "not-allowed";
|
|
button.style.pointerEvents = "none";
|
|
button.textContent = "Sending...";
|
|
responseField.textContent = "Waiting for response";
|
|
|
|
const headers = {
|
|
...(session ? { "X-Session": session } : {}),
|
|
...(profile ? { "X-Profile": profile } : {})
|
|
};
|
|
|
|
fetch("http://localhost/api/" + targetLink, {
|
|
method: requestType,
|
|
headers
|
|
})
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
responseField.textContent = data;
|
|
button.parentElement.style.cursor = "";
|
|
button.style.pointerEvents = "";
|
|
button.textContent = "Send Request";
|
|
})
|
|
.catch(error => {
|
|
responseField.textContent = "Error: " + error;
|
|
button.parentElement.style.cursor = "";
|
|
button.style.pointerEvents = "";
|
|
button.textContent = "Send Request";
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll(".send-btn").forEach(btn => {
|
|
btn.addEventListener("click", function () {
|
|
sendRequest(this);
|
|
});
|
|
});
|
|
|
|
document.getElementById("add-request").addEventListener("click", function () {
|
|
const container = document.getElementById("request-container");
|
|
const requestBox = container.firstElementChild.cloneNode(true);
|
|
|
|
requestBox.querySelector(".target-link-input").value = "federator/v1/dummy/moo";
|
|
requestBox.querySelector(".request-type-input").value = "GET";
|
|
requestBox.querySelector(".session-input").value = "somethingvalider";
|
|
requestBox.querySelector(".profile-input").value = "ihaveone";
|
|
requestBox.querySelector(".response").textContent = "";
|
|
|
|
requestBox.querySelector(".send-btn").addEventListener("click", function () {
|
|
sendRequest(this);
|
|
});
|
|
|
|
container.appendChild(requestBox);
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |