blob: 1fc2a96b060d3aff1abbb3c94e201049ebb63e7d (
plain) (
tree)
|
|
<html>
<head>
<meta charset="utf-8">
<title>Kittybox-Micropub debug client</title>
<style type="text/css">
* {
box-sizing: border-box;
}
:root {
font-family: sans-serif;
}
body {
margin: 0;
}
body > main {
margin: auto;
max-width: 1024px;
}
h1.header {
margin-top: 0.75em;
text-align: center;
}
fieldset + fieldset, fieldset + input, section + section, section + fieldset {
margin-top: 0.75em;
}
input[type="submit"] {
margin-left: auto;
display: block;
}
form > fieldset > section > label {
width: 100%;
display: block;
}
form > fieldset > section > input, form > fieldset > section > textarea {
width: 100%;
}
textarea {
min-height: 10em;
}
</style>
<script type="module">
const form = document.getElementById("micropub");
const channel_select_radio = document.getElementById("select_channels");
channel_select_radio.onclick = async () => {
const channels = await query_channels()
if (channels !== undefined) {
populate_channel_list(channels)
}
}
const no_channel_radio = document.getElementById("no_channel");
no_channel_radio.onclick = () => {
document.getElementById("channels").style.display = "none";
const channel_list = document.getElementById("channels_target")
channel_list.innerHTML = "";
}
function construct_body(form) {
return {
type: ["h-entry"],
properties: {
content: [form.elements.content.value],
name: form.elements.name.value ? [form.elements.name.value] : undefined,
category: form.elements.category.value ? form.elements.category.value.split(",").map(val => val.trim()) : undefined,
channel: form.elements.channel_select.value ? Array.from(form.elements.channel).map(i => i.checked ? i.value : false).filter(i => i) : undefined
}
}
}
async function query_channels() {
const response = await fetch(form.action + "?q=config", {
headers: {
"Authorization": `Bearer ${form.elements.access_token.value}`
}
})
const config = await response.json();
return config["channels"]
}
function populate_channel_list(channels) {
document.getElementById("channels").style.display = "block";
const channel_list = document.getElementById("channels_target")
channel_list.innerHTML = "";
channels.forEach((channel) => {
const template = document.getElementById("channel_selector").content.cloneNode(true)
const input = template.querySelector("input")
const label = template.querySelector("label")
input.id = `channel_selector_option_${channel.uid}`
input.value = channel.uid
label.for = input.id
label.innerHTML = `<a href="${channel.uid}">${channel.name}</a>`
channel_list.appendChild(template)
})
}
form.onsubmit = async (event) => {
event.preventDefault()
console.log(JSON.stringify(construct_body(form)))
try {
const response = await fetch(form.action, {
method: form.method,
headers: {
"Authorization": `Bearer ${form.elements.access_token.value}`,
"Content-Type": "application/json"
},
body: JSON.stringify(construct_body(form))
})
if (response.status != 201 || response.status != 202) {
console.error(await response.json());
}
if (response.headers.get("Location")) {
window.location.href = response.headers.get("Location");
}
} catch (e) {
console.error(e)
}
}
</script>
</head>
<body>
<h1 class="header">Kittybox-Micropub debug client</h1>
<main>
<p>
In a pinch? Lost your Micropub client, but need to make a quick announcement?
Worry not, the debug client has your back. <i>I just hope you have a spare Micropub token stored somewhere like I do...</i>
</p>
<form action="/micropub" method="POST" id="micropub">
<fieldset>
<legend>Authorization details</legend>
<section>
<label for="access_token">Access token:</label>
<input id="access_token" name="access_token" type="password">
<p><a href="https://gimme-a-token.5eb.nl/" target="_blank">Get an access token (will open in a new tab)</a></p>
</section>
</fieldset>
<fieldset>
<legend>Post details:</legend>
<section>
<label for="name">Name (leave blank for an unnamed post):</label>
<input id="name" type="text">
</section>
<section>
<label for="content">Content:</label>
<textarea id="content" placeholder="Your post's text goes here"></textarea>
</section>
<section>
<label for="category">Categories (separeted by commas):</label>
<input id="category" type="text">
</section>
<fieldset>
<legend>Channels</legend>
<section>
<input type="radio" id="no_channel" name="channel_select" checked value="">
<label for="no_channel">Default channel only</label>
</section>
<section>
<input type="radio" id="select_channels" name="channel_select" value="on">
<label for="select_channels">Select channels manually</label>
</section>
<fieldset id="channels" style="display: none">
<legend>Available channels:</legend>
<template id="channel_selector">
<section>
<input type="checkbox" name="channel" id="" value="">
<label for=""></label>
</section>
</template>
<div id="channels_target"></div>
</fieldset>
</fieldset>
</fieldset>
<input type="submit">
</form>
</main>
</body>
</html>
|