<html>
<head>
<meta charset="utf-8">
<title>Kittybox-Micropub debug client</title>
<link rel="stylesheet" href="./style.css">
<script type="module" src="./main.js"></script>
</head>
<body>
<noscript>
<h1 class="header">Kittybox Companion (Lite)</h1>
<p>I'm sorry, Kittybox Companion requires JavaScript to work.</p>
<p>This is a requirement due to multiple interactive features present in Kittybox, such as support for multiple-entry form fields, interactive login sequence and more.</p>
<p>However, the Micropub standard is extremely flexible, and if you happen to have a token, you can publish articles, notes, likes, follows and more by sending requests directly to the Micropub endpoint.</p>
<p><a href="https://micropub.spec.indieweb.org/">The Micropub spec is defined here.</a> Good luck!</p>
</noscript>
<div class="view" id="unauthorized" style="display:none">
</div>
<div class="view" id="authorized" style="display:none">
<form action="/.kittybox/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">
</div>
</main>
</body>
</html>