Add functionality to copy shortened URL and update internationalizati…

…on support

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>

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);
+}

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' });
     });
 });

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": "短網址：",
     }
 };
 

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' });
     });
 });

public/styles.css

@@ -90,4 +90,8 @@ h2, #responseMessage, input {
 
 .language-selector, .theme-selector {
   margin-bottom: 20px;
+}
+
+input[readonly] {
+  cursor: copy;
 }