Implement frontend

web/js/autoload.js

@@ -0,0 +1,53 @@
+// Load the API information
+loadAPIInfo();
+
+// Set up the keybinds
+setupKeybinds();
+
+// Try to load a paste if one exists
+let PASTE_ID = "";
+function loadPaste() {
+    let split = location.pathname.split(".");
+    let pasteID = split[0];
+    let language = split[1];
+    getPaste(pasteID, function(success, data) {
+        // Return if no paste was found
+        if (!success) {
+            location.replace(location.protocol + "//" + location.host);
+            return;
+        };
+
+        // Enable and disable the corresponding buttons
+        document.getElementById("btn_save").setAttribute("disabled", true);
+        document.getElementById("btn_delete").removeAttribute("disabled");
+        document.getElementById("btn_copy").removeAttribute("disabled");
+
+        // Set the paste content to the DOM and display the line numbers
+        document.getElementById("code").innerHTML = language
+            ? hljs.highlight(language, data.content).value.replace("\n", "<br />")
+            : hljs.highlightAuto(data.content).value.replace("\n", "<br />");
+        for (i = 1; i <= data.content.split(/\n/).length; i++) {
+            document.getElementById("linenos").innerHTML += "<span>" + i + "</span>";
+        }
+
+        // Set the PASTE_ID variable
+        PASTE_ID = pasteID;
+    });
+}
+if (location.pathname != "/") {
+    loadPaste();
+} else {
+    const element = document.getElementById("input");
+    element.classList.remove("hidden");
+    element.focus();
+}
+
+// Define a function to copy text to the clipboard
+function copyToClipboard(text) {
+    const element = document.createElement("textarea");
+    element.value = text;
+    document.body.appendChild(element);
+    element.select();
+    document.execCommand("copy");
+    document.body.removeChild(element);
+}

web/js/buttons.js

@@ -0,0 +1,82 @@
+// setupKeybinds initializes the keybinds for the buttons
+function setupKeybinds() {
+    window.onkeydown = function(event) {
+        if (!event.ctrlKey) return;
+
+        let element = null;
+        switch (event.keyCode) {
+            case 81: {
+                element = document.getElementById("btn_new");
+                break;
+            }
+            case 83: {
+                element = document.getElementById("btn_save");
+                break;
+            }
+            case 88: {
+                element = document.getElementById("btn_delete");
+                break;
+            }
+            case 67: {
+                element = document.getElementById("btn_copy");
+                break;
+            }
+        }
+
+        if (element) {
+            if (element.hasAttribute("disabled")) return;
+            event.preventDefault();
+            element.onclick();
+        }
+    }
+}
+
+// Define the behavior of the 'new' button
+document.getElementById("btn_new").onclick = function() {
+    location.replace(location.protocol + "//" + location.host);
+}
+
+// Define the behavior of the 'save' button
+document.getElementById("btn_save").onclick = function() {
+    // Return if the text area is empty
+    if (!document.getElementById("input").value) return;
+
+    // Create the paste
+    createPaste(document.getElementById("input").value, function(success, data) {
+        // Notify the user about an error if one occurs
+        if (!success) {
+            alert("Error:\n\n" + data);
+            return;
+        }
+
+        // Redirect the user to the paste page
+        let address = location.protocol + "//" + location.host + "/" + data.id;
+        if (data.suggestedSyntaxType) address += "." + data.suggestedSyntaxType;
+        copyToClipboard(data.deletionToken);
+        location.replace(address);
+    });
+}
+
+// Define the behavior of the 'delete' button
+document.getElementById("btn_delete").onclick = function() {
+    // Ask the user for the deletion token
+    let deletionToken = window.prompt("Deletion Token:");
+    if (!deletionToken) return;
+
+    // Delete the paste
+    deletePaste(PASTE_ID, deletionToken, function(success, data) {
+        // Notify the user about an error if one occurs
+        if (!success) {
+            alert("Error:\n\n" + data);
+            return;
+        }
+
+        // Redirect the user to the default page
+        location.replace(location.protocol + "//" + location.host);
+    });
+}
+
+// Define the behavior of the 'copy' button
+document.getElementById("btn_copy").onclick = function() {
+    copyToClipboard(document.getElementById("code").innerText);
+}

web/js/rest.js

@@ -0,0 +1,56 @@
+// loadAPIInfo loads and displays the API information
+function loadAPIInfo() {
+    fetch(location.protocol + "//" + location.host + "/api/v1/info")
+        .then(response => response.json())
+        .then(data => document.getElementById("version").innerText = data.version);
+}
+
+// getPaste retrieves a paste
+function getPaste(id, callback) {
+    fetch(location.protocol + "//" + location.host + "/api/v1/pastes/" + id)
+        .then(response => {
+            if (response.status != 200) {
+                response.text().then(data => callback(false, data));
+                return;
+            }
+            response.json().then(data => callback(true, data));
+        });
+}
+
+// createPaste creates a new paste
+function createPaste(content, callback) {
+    fetch(location.protocol + "//" + location.host + "/api/v1/pastes", {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            content: content
+        })
+    }).then(response => {
+        if (response.status != 200) {
+            response.text().then(data => callback(false, data));
+            return;
+        }
+        response.json().then(data => callback(true, data));
+    });
+}
+
+// deletePaste deletes a paste
+function deletePaste(id, deletionToken, callback) {
+    fetch(location.protocol + "//" + location.host + "/api/v1/pastes/" + id, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            deletionToken: deletionToken
+        })
+    }).then(response => {
+        if (response.status != 200) {
+            response.text().then(data => callback(false, data));
+            return;
+        }
+        response.text().then(data => callback(true, data));
+    });
+}