feat: barebones HTML interface is working
This commit is contained in:
parent
adb6853de5
commit
b3f73fde50
|
@ -1,13 +1,30 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset='utf-8'>
|
||||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||||
<title>Lonk</title>
|
<title>Lonk</title>
|
||||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||||
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
|
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
|
||||||
|
<script src="main.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -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
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
Loading…
Reference in New Issue