Display paste lifetime in frontend

web/assets/css/style.css

@@ -250,6 +250,22 @@ html.embedded #footer, body.embedded #footer {
   margin-top: 0;
 }
 
+.container #lifetime_container {
+  position: fixed;
+  right: 30px;
+  top: 90px;
+  padding: 10px 15px;
+  background-color: #222222;
+  border-radius: 10px;
+}
+
+.container #lifetime_container #lifetime {
+  background-color: #111111;
+  margin-left: 10px;
+  padding: 5px 10px;
+  border-radius: 10px;
+}
+
 #footer {
   position: fixed;
   bottom: 0;

web/assets/css/style.scss

@@ -208,6 +208,20 @@ html, body {
             }
         }
     }
+    & #lifetime_container {
+        position: fixed;
+        right: 30px;
+        top: 90px;
+        padding: 10px 15px;
+        background-color: #222222;
+        border-radius: 10px;
+        & #lifetime {
+            background-color: #111111;
+            margin-left: 10px;
+            padding: 5px 10px;
+            border-radius: 10px;
+        }
+    }
 }
 
 #footer {

web/assets/js/modules/duration.js

@@ -0,0 +1,32 @@
+export function format(milliseconds) {
+    if (milliseconds < 0) {
+        return "forever";
+    }
+
+    let parts = new Array();
+
+    let days = Math.floor(milliseconds / 86400000);
+    if (days > 0) {
+        parts.push(`${days} ${days > 1 ? "days" : "day"}`);
+        milliseconds -= days * 86400000;
+    }
+
+    let hours = Math.floor(milliseconds / 3600000);
+    if (hours > 0) {
+        parts.push(`${hours} ${hours > 1 ? "hours" : "hour"}`);
+        milliseconds -= hours * 3600000;
+    }
+
+    let minutes = Math.floor(milliseconds / 60000);
+    if (minutes > 0) {
+        parts.push(`${minutes} ${minutes > 1 ? "minutes" : "minute"}`);
+        milliseconds -= minutes * 60000;
+    }
+
+    let seconds = Math.ceil(milliseconds / 1000);
+    if (seconds > 0) {
+        parts.push(`${seconds} ${seconds > 1 ? "seconds" : "second"}`);
+    }
+
+    return parts.join(", ");
+}

web/assets/js/modules/state.js

@@ -3,11 +3,14 @@ import * as Notifications from "./notifications.js";
 import * as Spinner from "./spinner.js";
 import * as Animation from "./animation.js";
 import * as Encryption from "./encryption.js";
+import * as Duration from "./duration.js";
 
 const CODE_ELEMENT = document.getElementById("code");
 const LINE_NUMBERS_ELEMENT = document.getElementById("linenos");
 const INPUT_ELEMENT = document.getElementById("input");
 
+const LIFETIME_CONTAINER_ELEMENT = document.getElementById("lifetime_container");
+
 const BUTTONS_DEFAULT_ELEMENT = document.getElementById("buttons_default");
 const BUTTON_NEW_ELEMENT = document.getElementById("btn_new");
 const BUTTON_SAVE_ELEMENT = document.getElementById("btn_save");
@@ -34,6 +37,7 @@ let EDIT_MODE = false;
 
 let API_INFORMATION = {
     version: "error",
+    pasteLifetime: -1,
     modificationTokens: false,
     reports: false
 };
@@ -100,6 +104,7 @@ export async function initialize() {
         // Give the user the opportunity to paste his code
         INPUT_ELEMENT.classList.remove("hidden");
         INPUT_ELEMENT.focus();
+        LIFETIME_CONTAINER_ELEMENT.classList.remove("hidden");
     }
 
     // Update the state of the buttons to match the current state
@@ -122,6 +127,9 @@ async function loadAPIInformation() {
 
     // Display the API version
     document.getElementById("version").innerText = API_INFORMATION.version;
+
+    // Display the paste lifetime
+    document.getElementById("lifetime").innerText = Duration.format(API_INFORMATION.pasteLifetime);
 }
 
 // Sets the current persistent code to the code block, highlights it and updates the line numbers
@@ -168,6 +176,7 @@ function toggleEditMode() {
     if (EDIT_MODE) {
         EDIT_MODE = false;
         INPUT_ELEMENT.classList.add("hidden");
+        LIFETIME_CONTAINER_ELEMENT.classList.add("hidden");
         CODE_ELEMENT.classList.remove("hidden");
         updateLineNumbers(CODE);
         Animation.animate(BUTTONS_EDIT_ELEMENT, "animate__fadeOutDown", "0.3s", () => {
@@ -178,6 +187,7 @@ function toggleEditMode() {
     } else {
         EDIT_MODE = true;
         CODE_ELEMENT.classList.add("hidden");
+        LIFETIME_CONTAINER_ELEMENT.classList.remove("hidden");
         INPUT_ELEMENT.classList.remove("hidden");
         INPUT_ELEMENT.value = CODE;
         INPUT_ELEMENT.focus();

web/index.html

@@ -110,6 +110,9 @@
     </div>
     <div class="container">
         <div id="notifications"></div>
+        <div id="lifetime_container" class="hidden">
+            Lifetime: <span id="lifetime">loading...</span>
+        </div>
         <div id="linenos"><span>></span></div>
         <div id="content">
             <div id="code"></div>