71 lines
2.3 KiB
HTML
71 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Scratchbox</title>
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
</head>
|
|
<body>
|
|
<main class="container">
|
|
<h1>Scratchbox</h1>
|
|
<p>Create an unauthenticated scratch. It expires automatically.</p>
|
|
|
|
<form id="scratch-form">
|
|
<label for="content">Text content</label>
|
|
<textarea id="content" name="content" rows="14" placeholder="Paste text here"></textarea>
|
|
<button type="submit">Create scratch</button>
|
|
</form>
|
|
|
|
<section id="result" class="hidden">
|
|
<h2>Created</h2>
|
|
<p><strong>View:</strong> <a id="view-link" href="#" target="_blank" rel="noreferrer"></a></p>
|
|
<p><strong>Raw:</strong> <a id="raw-link" href="#" target="_blank" rel="noreferrer"></a></p>
|
|
<p id="expire-text"></p>
|
|
</section>
|
|
|
|
<section id="error" class="error hidden"></section>
|
|
</main>
|
|
|
|
<script>
|
|
const form = document.getElementById("scratch-form");
|
|
const result = document.getElementById("result");
|
|
const error = document.getElementById("error");
|
|
const viewLink = document.getElementById("view-link");
|
|
const rawLink = document.getElementById("raw-link");
|
|
const expireText = document.getElementById("expire-text");
|
|
|
|
form.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
result.classList.add("hidden");
|
|
error.classList.add("hidden");
|
|
|
|
const content = document.getElementById("content").value;
|
|
try {
|
|
const response = await fetch("/api/scratch", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "text/plain; charset=utf-8" },
|
|
body: content
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const message = await response.text();
|
|
throw new Error(message || `request failed (${response.status})`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
viewLink.href = payload.view_url;
|
|
viewLink.textContent = payload.view_url;
|
|
rawLink.href = payload.raw_url;
|
|
rawLink.textContent = payload.raw_url;
|
|
expireText.textContent = `Expires at: ${payload.expires_at}`;
|
|
result.classList.remove("hidden");
|
|
} catch (err) {
|
|
error.textContent = err.message;
|
|
error.classList.remove("hidden");
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|