diff options
Diffstat (limited to 'src/index.html')
| -rw-r--r-- | src/index.html | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..15ccfc0 --- /dev/null +++ b/src/index.html @@ -0,0 +1,172 @@ +<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() { + return ["main", "likes", "bookmarks"] + 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}` + input.value = channel + label.for = input.id + label.innerHTML = `<code>${channel}</code>` + + channel_list.appendChild(template) + }) + } + + form.onsubmit = async (event) => { + event.preventDefault() + console.log(JSON.stringify(construct_body(form))) + return + const response = await fetch(form.action, { + headers: { + "Authorization": `Bearer ${form.elements.access_token.value}` + }, + body: construct_body(form) + }) + } + </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> \ No newline at end of file |