forked from grumpydevelop/federator
721e37882d
- removed support for multiple connector-plugins - fixed issue where outbox wasn't properly retrieved from contentnation
112 lines
No EOL
4.9 KiB
HTML
112 lines
No EOL
4.9 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 overflow-y-auto">
|
|
<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-wrap">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/fedusers/grumpydevelop@contentnation.net/outbox?page=0";
|
|
requestBox.querySelector(".request-type-input").value = "GET";
|
|
requestBox.querySelector(".session-input").value = "";
|
|
requestBox.querySelector(".profile-input").value = "";
|
|
requestBox.querySelector(".response").textContent = "Waiting for response";
|
|
|
|
requestBox.querySelector(".send-btn").addEventListener("click", function () {
|
|
sendRequest(this);
|
|
});
|
|
|
|
container.appendChild(requestBox);
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |