Implement paste reports

internal/report/report.go

@@ -17,6 +17,7 @@ type ReportRequest struct {
 
 // ReportResponse represents a report response received from the report webhook
 type ReportResponse struct {
+	Success bool   `json:"success"`
 	Message string `json:"message"`
 }
 

web/assets/css/style.css

@@ -78,6 +78,25 @@ html, body {
   will-change: transform;
 }
 
+#btn_report {
+  position: fixed;
+  bottom: 60px;
+  right: 30px;
+}
+
+#btn_report svg {
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+}
+
+#btn_report:hover {
+  cursor: pointer;
+}
+
+#btn_report:hover svg {
+  stroke: #2daa57;
+}
+
 .navigation {
   position: fixed;
   top: 0;

web/assets/css/style.scss

@@ -76,6 +76,21 @@ html, body {
     }
 }
 
+#btn_report {
+    position: fixed;
+    bottom: 60px;
+    right: 30px;
+    & svg {
+        transition: all 250ms;
+    }
+    &:hover {
+        cursor: pointer;
+        & svg {
+            stroke: #2daa57;
+        }
+    }
+}
+
 .navigation {
     position: fixed;
     top: 0;

web/assets/js/app.js

@@ -1,23 +1,5 @@
-import * as API from "./modules/api.js";
-import * as Notifications from "./modules/notifications.js";
 import * as Spinner from "./modules/spinner.js";
 import * as State from "./modules/state.js";
 
-// Load the API information
-let API_INFORMATION = {
-    version: "error",
-    modificationTokens: false,
-    reports: false
-};
-const response = await API.getAPIInformation();
-if (response.ok) {
-    API_INFORMATION = await response.json();
-} else {
-    Notifications.error("Failed loading API information: <b>" + await response.text() + "</b>");
-}
-
-// Display the API version
-document.getElementById("version").innerText = API_INFORMATION.version;
-
 // Initialize the application state
 Spinner.surround(State.initialize);

web/assets/js/modules/state.js

@@ -14,6 +14,8 @@ const BUTTON_EDIT_ELEMENT = document.getElementById("btn_edit");
 const BUTTON_DELETE_ELEMENT = document.getElementById("btn_delete");
 const BUTTON_COPY_ELEMENT = document.getElementById("btn_copy");
 
+const BUTTON_REPORT_ELEMENT = document.getElementById("btn_report");
+
 const BUTTONS_EDIT_ELEMENT = document.getElementById("buttons_edit");
 const BUTTON_EDIT_CANCEL_ELEMENT = document.getElementById("btn_edit_cancel");
 const BUTTON_EDIT_APPLY_ELEMENT = document.getElementById("btn_edit_apply");
@@ -24,8 +26,16 @@ let CODE;
 
 let EDIT_MODE = false;
 
+let API_INFORMATION = {
+    version: "error",
+    modificationTokens: false,
+    reports: false
+};
+
 // Initializes the state system
 export async function initialize() {
+    loadAPIInformation();
+
     setupButtonFunctionality();
     setupKeybinds();
 
@@ -60,6 +70,20 @@ export async function initialize() {
     updateButtonState();
 }
 
+// Loads the API information
+async function loadAPIInformation() {
+    // try to retrieve the API information
+    const response = await API.getAPIInformation();
+    if (response.ok) {
+        API_INFORMATION = await response.json();
+    } else {
+        Notifications.error("Failed loading API information: <b>" + await response.text() + "</b>");
+    }
+
+    // Display the API version
+    document.getElementById("version").innerText = API_INFORMATION.version;
+}
+
 // Sets the current persistent code to the code block, highlights it and updates the line numbers
 function updateCode() {
     CODE_ELEMENT.innerHTML = LANGUAGE
@@ -76,11 +100,19 @@ function updateButtonState() {
         BUTTON_EDIT_ELEMENT.removeAttribute("disabled");
         BUTTON_DELETE_ELEMENT.removeAttribute("disabled");
         BUTTON_COPY_ELEMENT.removeAttribute("disabled");
+
+        if (API_INFORMATION.reports) {
+            BUTTON_REPORT_ELEMENT.classList.remove("hidden");
+        }
     } else {
         BUTTON_SAVE_ELEMENT.removeAttribute("disabled");
         BUTTON_EDIT_ELEMENT.setAttribute("disabled", true);
         BUTTON_DELETE_ELEMENT.setAttribute("disabled", true);
         BUTTON_COPY_ELEMENT.setAttribute("disabled", true);
+
+        if (API_INFORMATION.reports) {
+            BUTTON_REPORT_ELEMENT.classList.add("hidden");
+        }
     }
 }
 
@@ -266,6 +298,29 @@ function setupButtonFunctionality() {
         toggleEditMode();
         Notifications.success("Successfully edited paste.");
     });
+
+    BUTTON_REPORT_ELEMENT.addEventListener("click", async () => {
+        // Ask the user for a reason
+        const reason = prompt("Reason:");
+        if (!reason) {
+            return;
+        }
+
+        // Try to report the paste
+        const response = await API.reportPaste(PASTE_ID, reason);
+        if (!response.ok) {
+            Notifications.error("Error while reporting paste: <b>" + await response.text() + "</b>");
+            return;
+        }
+
+        // Show the response message
+        const data = await response.json();
+        if (!data.success) {
+            Notifications.error("Error while reporting paste: <b>" + data.message + "</b>");
+            return;
+        }
+        Notifications.success(data.message);
+    });
 }
 
 // Asks for clipboard write permission

web/index.html

@@ -12,6 +12,17 @@
 
 <body>
     <div id="spinner-container" class="hidden"><div class="spinner"></div></div>
+    <div id="btn_report" class="hidden" title="Report paste">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-flag" width="40"
+            height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <line x1="5" y1="5" x2="5" y2="21" />
+            <line x1="19" y1="5" x2="19" y2="14" />
+            <path d="M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0" />
+            <path d="M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0" />
+        </svg>
+    </div>
     <div class="navigation">
         <div class="buttons" id="buttons_default">
             <button class="button" id="btn_new" title="Create new paste (Ctrl + Q)">