meeg_leeto
/
lonk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: barebones HTML interface is working

This commit is contained in:
meeg_leeto 2022-04-30 00:53:42 +01:00
parent adb6853de5
commit b3f73fde50
2 changed files with 74 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
data/served/index.html
View File

@ -1,13 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Lonk</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src="main.js"></script>
</head>
<body>
<h1 id="shortened"></h1>
<!-- Yes, this form requires Javascript, sorry.
I promise there are no trackers on this page,
but if you're tech savvy (and paranoid) enough to
be browsing the web with Javascript blocked, then
just do a POST request to /shorten with the URL you
wish to shorten Base64-encoded as the body. -->
<form id="form">
<input type="url" name="url" id="url" required>
<input type="submit" hidden />
</form>
<p id="info"></p>
</body>
</html>

56
data/served/main.js Normal file
View File

@ -0,0 +1,56 @@
'use strict';
(() => {
document.addEventListener('DOMContentLoaded', (_) => {
const waiting = false;
let xhr;
const field = document.getElementById('url');
field.addEventListener('change', () => {
if (waiting && xhr != null) {
xhr.abort();
}
});
const form = document.getElementById('form');
form.addEventListener('submit', (event) => {
// We need to create a different body, so prevent the default submission.
event.preventDefault();
if (waiting) {
// Prevent multiple requests.
return;
}
// Get the URL the user is trying to shorten.
const url = document.getElementById('url').value;
// Encode the URL as Base64.
const encoded = btoa(encodeURIComponent(url).replace(/%([0-9A-F]{2})/g, (match, p1) =>
String.fromCharCode('0x' + p1)
));
// POST the body to /shorten.
xhr = new XMLHttpRequest();
xhr.open('POST', '/shorten', true);
xhr.overrideMimeType('text/plain');
xhr.send(encoded);
xhr.onload = () => {
switch (xhr.status) {
case 200:
let slug = xhr.response;
console.log(slug);
break;
default:
console.log(xhr.response);
break;
}
};
xhr.onerror = () => {
// TODO
};
});
});
})();