From 8cc37019d56bbbae1d03e5ade9f48694e132581d Mon Sep 17 00:00:00 2001
From: DJStowe <devinstowe@gmail.com>
Date: Fri, 26 Jan 2024 17:50:36 -0800
Subject: [PATCH] Added copy-button and JS to copy text to user clipboard

---
 src/link_liberate/templates/base.html        | 29 ++++++++++++++------
 src/link_liberate/templates/showlibrate.html | 17 +++++++++++-
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/link_liberate/templates/base.html b/src/link_liberate/templates/base.html
index 0a8f0cf..dfac793 100644
--- a/src/link_liberate/templates/base.html
+++ b/src/link_liberate/templates/base.html
@@ -11,7 +11,7 @@
             margin: 0;
             padding: 0;
         }
-        
+
         .container {
             max-width: 600px;
             align-content: center;
@@ -21,20 +21,20 @@
             border-radius: 8px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }
-        
+
         a {
           text-decoration: none !important;
         }
-        
+
         h1 {
             text-align: center;
             color: #333;
         }
-        
+
         .form-container {
             text-align: center;
         }
-        
+
         .link-input {
             width: 100%;
             padding: 10px;
@@ -43,7 +43,7 @@
             border: 1px solid #ccc;
             border-radius: 4px;
         }
-        
+
         .submit-button {
             background-color: #4CAF50;
             color: #fff;
@@ -53,11 +53,24 @@
             cursor: pointer;
             font-size: 16px;
         }
-        
+
         .submit-button:hover {
             background-color: #45a049;
         }
-        
+        .copy-button {
+            background-color: #4CAF50;
+            color: #fff;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            margin-left: 10px;
+        }
+
+        .copy-button:hover {
+            background-color: #45a049;
+        }
     </style>
     <title>
         {% block title %}
diff --git a/src/link_liberate/templates/showlibrate.html b/src/link_liberate/templates/showlibrate.html
index c9ee02d..d8dead7 100644
--- a/src/link_liberate/templates/showlibrate.html
+++ b/src/link_liberate/templates/showlibrate.html
@@ -19,7 +19,22 @@
     <a href="/"><h1>🔗LinkLiberate🪽</h1></a>
     <div class="form-container">
         <p>Link: </p><a href="{{ link }}">{{ link }}</a>
-        <p>Short: </p><a href="{{ short }}">{{ short }}</a>
+        <p>Short: </p><a id="shortLink" href="{{ short }}">{{ short }}</a>
+        <button class="copy-button" onclick="copyTextToClipboard('shortLink')">Copy</button>
+
     </div>
 </div>
+<script>
+// Javascript to simply copy text in elementID to user's clipboard
+    function copyTextToClipboard(elementId) {
+        var text = document.getElementById(elementId).textContent || document.getElementById(elementId).innerText;
+        navigator.clipboard.writeText(text).then(function() {
+            console.log("Text copied to clipboard");
+        })
+        .catch(function(err) {
+            console.error('Error in copying text: ', err);
+        });
+    }
+</script>
+
 {% endblock %}