From c24d4a09d2d30584c0355769bcbfa25861bde4a3 Mon Sep 17 00:00:00 2001
From: kevinlee-06 <cgshyuankai@proton.me>
Date: Tue, 21 Jan 2025 20:28:11 +0800
Subject: [PATCH] Add functionality to copy shortened URL and update
 internationalization support

---
 public/index.html        | 10 +++++++++-
 public/scripts/copy.js   | 14 ++++++++++++++
 public/scripts/delete.js |  4 ++++
 public/scripts/i18n.js   |  2 ++
 public/scripts/post.js   |  6 ++++++
 public/styles.css        |  4 ++++
 6 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 public/scripts/copy.js

diff --git a/public/index.html b/public/index.html
index fe2934b..aabf8de 100644
--- a/public/index.html
+++ b/public/index.html
@@ -52,6 +52,14 @@ <h2 id="response-h2" title="A json will be returned if success." data-i18n="resp
             </label>
         </h2>
         <pre id="responseMessage"></pre>
+        <div>
+            <label for="shortenedUrl" data-i18n="shortened-url">Shortened URL:</label>
+            <input type="text" id="shortenedUrl" readonly onclick="copyText()"><br><br>
+            
+            <button onclick="copyText()">Copy</button>
+
+            <p id="copyMessage" style="display: none; color: rgb(255, 56, 56);">Text copied!</p>
+        </div>
     </div>
     <div class="container">
 
@@ -76,7 +84,7 @@ <h2 id="response-h2" title="A json will be returned if success." data-i18n="resp
         </select>
     </div>
 </div>
-
+    <script src="/public/scripts/copy.js"></script>
     <script src="/public/scripts/delete.js"></script>
     <script src="/public/scripts/post.js"></script>
     <script src="/public/scripts/styles.js"></script>
diff --git a/public/scripts/copy.js b/public/scripts/copy.js
new file mode 100644
index 0000000..dd819c1
--- /dev/null
+++ b/public/scripts/copy.js
@@ -0,0 +1,14 @@
+function copyText() {
+    var copyText = document.getElementById("shortenedUrl");
+    copyText.select();
+    copyText.setSelectionRange(0, 99999);
+    document.execCommand("copy");
+    // alert("已複製訊息: " + copyText.value);
+    const message = document.getElementById("copyMessage");
+    message.style.display = "block";
+
+    // Hide the message after 1.5 seconds
+    setTimeout(() => {
+        message.style.display = "none";
+    }, 1500);
+}
\ No newline at end of file
diff --git a/public/scripts/delete.js b/public/scripts/delete.js
index 0876cd4..ab2c1a6 100644
--- a/public/scripts/delete.js
+++ b/public/scripts/delete.js
@@ -8,6 +8,8 @@ document.getElementById('deleteForm').addEventListener('submit', function(event)
         password: deletePassword
     };
 
+    document.getElementById('shortenedUrl').value = "";
+
     fetch(`/${deleteId}`, {
         method: 'DELETE',
         headers: {
@@ -23,8 +25,10 @@ document.getElementById('deleteForm').addEventListener('submit', function(event)
     })
     .then(message => {
         document.getElementById('responseMessage').textContent = message;
+        document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     })
     .catch(error => {
         document.getElementById('responseMessage').textContent = 'Error: ' + error.message;
+        document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     });
 });
\ No newline at end of file
diff --git a/public/scripts/i18n.js b/public/scripts/i18n.js
index 67cefe7..4c7dc6c 100644
--- a/public/scripts/i18n.js
+++ b/public/scripts/i18n.js
@@ -22,6 +22,7 @@ const translations = {
         "theme-black": "Black",
         "theme-tailwind": "Tailwind",
         "language-label": "語言：",
+        "shortened-url": "Shortened URL:",
     },
     "zh-TW": {
         "title": "Linklie - 短網址",
@@ -46,6 +47,7 @@ const translations = {
         "theme-black": "黑色",
         "theme-tailwind": "Tailwind",
         "language-label": "Language:",
+        "shortened-url": "短網址：",
     }
 };
 
diff --git a/public/scripts/post.js b/public/scripts/post.js
index e273708..f10a86b 100644
--- a/public/scripts/post.js
+++ b/public/scripts/post.js
@@ -20,6 +20,7 @@ document.getElementById('postForm').addEventListener('submit', function(event) {
     })
     .then(response => {
         if (!response.ok) {
+            document.getElementById('shortenedUrl').value = "";
             return response.text().then(text => {
                 throw new Error(text);
             });
@@ -28,8 +29,13 @@ document.getElementById('postForm').addEventListener('submit', function(event) {
     })
     .then(data => {
         document.getElementById('responseMessage').textContent = JSON.stringify(data, null, 2);
+        const host = window.location.host;
+        const protocol = window.location.protocol;
+        document.getElementById('shortenedUrl').value = `${protocol}//${host}/${data.id}`;
+        document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     })
     .catch(error => {
         document.getElementById('responseMessage').textContent = 'Error: ' + error.message;
+        document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     });
 });
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 1024ccf..ff0bc1d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -90,4 +90,8 @@ h2, #responseMessage, input {
 
 .language-selector, .theme-selector {
   margin-bottom: 20px;
+}
+
+input[readonly] {
+  cursor: copy;
 }
\ No newline at end of file