add 404 page for incorrect download codes

This commit is contained in:
xenofem 2022-05-03 18:31:50 -04:00
parent 106c99d398
commit 9d87934cf4
8 changed files with 92 additions and 36 deletions

38
static/404.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
<link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
<link rel="manifest" href="manifest.json"/>
<script src="js/download.js"></script>
<title>transbeam</title>
</head>
<body>
<div id="header">
<a href="./">
<img src="images/site-icons/transbeam.svg" height="128">
<h1>transbeam</h1>
</a>
</div>
<div id="download" class="section">
<h3>The download code you entered wasn't found. The download may have expired.</h3>
<form id="download_form" action="download" method="get">
<div>
<label>
<input type="text" id="download_code_input" name="code" placeholder="Download code"/>
</label>
</div>
<input id="download_button" type="submit" value="Download"/>
</form>
</div>
<div class="section">
<a href="./"><h3>&lt; Back</h3></a>
</div>
<div id="footer">
<h5>(c) 2022 xenofem, MIT licensed</h5>
<h5><a target="_blank" href="https://git.xeno.science/xenofem/transbeam">source</a></h5>
</div>
</body>
</html>

View file

@ -8,6 +8,11 @@ body {
#header h1 {
margin-top: 5px;
color: black;
}
#header a {
text-decoration: none;
}
#message {

View file

@ -3,12 +3,13 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="transbeam.css"/>
<link rel="stylesheet" type="text/css" href="states.css"/>
<link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
<link rel="stylesheet" type="text/css" href="css/states.css"/>
<link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
<link rel="manifest" href="manifest.json"/>
<script src="util.js"></script>
<script src="transbeam.js"></script>
<script src="js/util.js"></script>
<script src="js/download.js"></script>
<script src="js/upload.js"></script>
<title>transbeam</title>
</head>
<body class="noscript landing">

25
static/js/download.js Normal file
View file

@ -0,0 +1,25 @@
document.addEventListener('DOMContentLoaded', () => {
const downloadCodeInput = document.getElementById('download_code_input');
const downloadButton = document.getElementById('download_button');
const downloadForm = document.getElementById('download_form');
downloadCodeInput.addEventListener('beforeinput', (e) => {
if (/^[a-zA-Z0-9-]+$/.test(e.data)) { return; }
e.preventDefault();
if (e.data === ' ') {
downloadCodeInput.value += '-';
}
});
const disableEnableDownload = () => { downloadButton.disabled = (downloadCodeInput.value === ''); };
disableEnableDownload();
downloadCodeInput.addEventListener('input', disableEnableDownload);
downloadForm.addEventListener('submit', (e) => {
if (downloadCodeInput.value === '') {
e.preventDefault();
} else {
setTimeout(() => {
downloadCodeInput.value = '';
downloadButton.disabled = true;
}, 0);
}
});
});

View file

@ -71,30 +71,6 @@ document.addEventListener('DOMContentLoaded', () => {
downloadCodeContainer.addEventListener('mouseleave', () => {
downloadCodeContainer.className = '';
});
const downloadCodeInput = document.getElementById('download_code_input');
const downloadButton = document.getElementById('download_button');
const downloadForm = document.getElementById('download_form');
downloadCodeInput.addEventListener('beforeinput', (e) => {
if (/^[a-zA-Z0-9-]+$/.test(e.data)) { return; }
e.preventDefault();
if (e.data === ' ') {
downloadCodeInput.value += '-';
}
});
const disableEnableDownload = () => { downloadButton.disabled = (downloadCodeInput.value === ''); };
disableEnableDownload();
downloadCodeInput.addEventListener('input', disableEnableDownload);
downloadForm.addEventListener('submit', (e) => {
if (downloadCodeInput.value === '') {
e.preventDefault();
} else {
setTimeout(() => {
downloadCodeInput.value = '';
downloadButton.disabled = true;
}, 0);
}
});
});
function updateFiles() {