working changes
This commit is contained in:
61
etydFrontend/_static/etyd.js
Normal file
61
etydFrontend/_static/etyd.js
Normal file
@@ -0,0 +1,61 @@
|
||||
//Firefox check
|
||||
window.onload = function() {
|
||||
document.getElementById('resultfeed').value = "hii :3"
|
||||
if (navigator.userAgent.includes("Firefox")) {
|
||||
document.getElementById('resultfeed').value += `\nClipboard functionality does not work on Firefox.`
|
||||
document.getElementById('clipboard1').disabled = true
|
||||
document.getElementById('clipboard2').disabled = true
|
||||
}
|
||||
}
|
||||
|
||||
function makeRandomHex(amount) {
|
||||
const characters = "1234567890abcdef"
|
||||
let counter = 0
|
||||
let result = ""
|
||||
while (counter < amount) {
|
||||
result += characters.charAt(Math.floor(Math.random() * characters.length))
|
||||
counter += 1
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function randomUrlTick() {
|
||||
if (document.getElementById("randomizationtoggle").checked == true) {
|
||||
document.getElementById("targetfield").disabled = true
|
||||
document.getElementById("targetfield").value = makeRandomHex(6)
|
||||
} else {
|
||||
document.getElementById("targetfield").disabled = false
|
||||
document.getElementById("targetfield").value = null
|
||||
}
|
||||
}
|
||||
|
||||
function buttonCopyResult() {
|
||||
navigator.clipboard.writeText(`${document.location.href}${document.getElementById("urlfield").value}`)
|
||||
}
|
||||
|
||||
function buttonFillFromClipboard() {
|
||||
navigator.clipboard.readText().then(res => {
|
||||
document.getElementById("valuefield").value = res;
|
||||
})
|
||||
}
|
||||
|
||||
function postData() {
|
||||
fetch("http://nrdesktop:8081/etydwrite", {
|
||||
method: "POST",
|
||||
mode: "cors",
|
||||
headers: {
|
||||
"Authorization": document.getElementById("authfield").value
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"target": document.getElementById("targetfield").value,
|
||||
"value": document.getElementById("valuefield").value,
|
||||
"action": document.getElementById("actiondropdown").value,
|
||||
"random": document.getElementById("randomizationtoggle").checked
|
||||
})
|
||||
}).then(response => {
|
||||
document.getElementById("resultfeed").value += `\n${response.status} ${response.body}`
|
||||
}).catch(error => {
|
||||
document.getElementById("resultfeed").value += `\nError: ${error}`
|
||||
})
|
||||
}
|
||||
|
||||
22
etydFrontend/_static/index.css
Normal file
22
etydFrontend/_static/index.css
Normal file
@@ -0,0 +1,22 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.marginright1em {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.resultfeed {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.resultfeed {
|
||||
min-height: 20vh;
|
||||
}
|
||||
}
|
||||
75
etydFrontend/index.html
Normal file
75
etydFrontend/index.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="_static/etyd.js"></script>
|
||||
<link rel="stylesheet" href="_static/index.css">
|
||||
<title>etyd.cc</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--Title-->
|
||||
<h1>etyd.cc URL Shortener</h1>
|
||||
<hr>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="marginright1em">
|
||||
<!--Input-->
|
||||
<label for="auth">Authorization:</label><br>
|
||||
<input type="password" id="authfield" data-bwautofill> <label>CTRL+Shift+L to Autofill</label><br>
|
||||
|
||||
<label for="url">URL (API Target):</label><br>
|
||||
<input type="text" id="targetfield"><input type="checkbox" id="randomizationtoggle" onclick="randomUrlTick()"> <label>Random</label><br>
|
||||
|
||||
<label for="value">Value (Redirect Target):</label><br>
|
||||
<input type="text" id="valuefield">
|
||||
<button onclick="buttonFillFromClipboard()" id="clipboard1">Clipboard</button><br>
|
||||
|
||||
<label for="action">Action:</label><br>
|
||||
<select name="action" id="actiondropdown">
|
||||
<option value="POST">Add</option>
|
||||
<option value="DELETE">Delete</option>
|
||||
</select>
|
||||
|
||||
<button onclick="postData()">POST Data</button>
|
||||
<button onclick="buttonCopyResult()" id="clipboard2">Copy Shortened URL</button>
|
||||
<label id="copyconfirmation" style="display: none;">OK</label><br><br>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea id="resultfeed" cols="50" class="resultfeed" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<!--Details-->
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="marginright1em">
|
||||
<h2>Instructions</h2>
|
||||
<p>
|
||||
1. Enter your API Key in the 'Authorization' field <br>
|
||||
2. Enter the shortened URL you want to act upon under the 'URL' field<br>
|
||||
3. Enter the URL that the user will be redirected to under the 'Value' field<br>
|
||||
4. Change 'Action' depending if you want to create or delete a URL<br>
|
||||
5. Press 'POST Data' to submit the form to the server
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Status Code Reference</h2>
|
||||
<p>
|
||||
400: Bad Request - You will see this if you try and delete a non-existent URL<br>
|
||||
401: Unauthorized - Did you enter your API key?<br>
|
||||
405: Method Not Allowed - You will see this if you try a request with no arguments<br>
|
||||
409: Conflict - The entered URL already exists, tick 'Random' and try again<br>
|
||||
500: Internal Server Error - If this happens something has gone very wrong<br>
|
||||
502: Bad Gateway - If you see this the backend is down/unreachable by Caddy<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user