KCA/UrlShortener
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Guh

Browse source
This commit is contained in:
Christopher Cookman 2024-11-03 20:55:19 -07:00
parent 50c328a492
commit 6398baa64e
2 changed files with 86 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.js
View file

@ -12,7 +12,7 @@ app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res) => { app.get("/", (req, res) => {
res.status(404).json({ error: 'Not found' }); res.sendFile(__dirname + "/static/index.html");
}); });
// Add your routes and middleware here // Add your routes and middleware here

85
static/index.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KCA URL Shortener</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body class="bg-dark text-light">
<!-- Modal -->
<div class="modal fade show" tabindex="-1" style="display: block;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title">URL Shortener</h5>
</div>
<div class="modal-body">
<p>
If you're seeing this, you probably either hit a bad link, or were curious as to what this is!
Welcome! There isn't a lot to see here, and the tool itself is password protected, so there isn't much to do.
If you want to use this for yourself, or just want to peek at the code, check out the source code <a
href="https://git.chrischro.me/KCA/UrlShortener" class="text-light">here!</a>
Other than that, the form below is used for creating links!
</p>
<form id="shortenForm">
<div class="mb-3">
<label for="url" class="form-label">URL:</label>
<input type="text" id="url" name="url" class="form-control" required>
</div>
<div class="mb-3">
<label for="shortUrl" class="form-label">Custom Short URL (optional):</label>
<input type="text" id="shortUrl" name="shortUrl" class="form-control">
</div>
<div class="mb-3">
<label for="passcode" class="form-label">Passcode:</label>
<input type="password" id="passcode" name="passcode" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Shorten URL</button>
</form>
<div id="result" style="margin-top: 20px;"></div>
</div>
</div>
</div>
</div>
<script>
document.getElementById('shortenForm').addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(this);
const data = {
url: formData.get('url'),
shortUrl: formData.get('shortUrl'),
passcode: formData.get('passcode')
};
fetch('/shorten', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
const resultDiv = document.getElementById('result');
if (result.error) {
resultDiv.innerHTML = `<p style="color: red;">${result.error}</p>`;
} else {
resultDiv.innerHTML = `<p>Short URL: <a href="${result.shortUrl}" class="text-light">${result.shortUrl}</a></p>`;
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').innerHTML = `<p style="color: red;">An error occurred.</p>`;
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>