Refactor response handling.

kevinlee-06 · Jan 21, 2025 · a90e4ea · a90e4ea
1 parent c24d4a0
commit a90e4ea
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 32 deletions.
diff --git a/public/index.html b/public/index.html
@@ -46,15 +46,18 @@ <h2 data-i18n="delete-title">Delete Short URL</h2>
 
     <div class="container">
         <h2 id="response-h2" title="A json will be returned if success." data-i18n="response-title">
-            Response:
+            Response
             <label style="display: inline-block; font-size: 0.5em;" for="response-h2" title="A json will be returned if success." data-i18n="response-tips">
                 [tips]
             </label>
         </h2>
-        <pre id="responseMessage"></pre>
+        <div>
+            <label for="responseMessage" data-i18n="response-message">Response</label>
+            <textarea type="text" id="responseMessage"  rows="5" readonly></textarea><br><br>
+        </div>
         <div>
             <label for="shortenedUrl" data-i18n="shortened-url">Shortened URL:</label>
-            <input type="text" id="shortenedUrl" readonly onclick="copyText()"><br><br>
+            <input type="text" id="shortenedUrl" onclick="copyText();" readonly><br><br>
 
             <button onclick="copyText()">Copy</button>
 
@@ -89,6 +92,10 @@ <h2 id="response-h2" title="A json will be returned if success." data-i18n="resp
     <script src="/public/scripts/post.js"></script>
     <script src="/public/scripts/styles.js"></script>
     <script src="/public/scripts/i18n.js"></script>
-    <script>translatePage('zh-TW');</script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            translatePage('zh-TW');
+        });
+    </script>
 </body>
 </html>
diff --git a/public/scripts/delete.js b/public/scripts/delete.js
@@ -19,16 +19,16 @@ document.getElementById('deleteForm').addEventListener('submit', function(event)
     })
     .then(response => {
         if (!response.ok) {
-            throw new Error('Network response was not ok: ' + response.statusText);
+            throw new Error(response.statusText);
         }
         return response.text();
     })
     .then(message => {
-        document.getElementById('responseMessage').textContent = message;
+        document.getElementById('responseMessage').value = message;
         document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     })
     .catch(error => {
-        document.getElementById('responseMessage').textContent = 'Error: ' + error.message;
+        document.getElementById('responseMessage').value = 'Error: ' + error.message;
         document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     });
 });
diff --git a/public/scripts/i18n.js b/public/scripts/i18n.js
@@ -23,6 +23,7 @@ const translations = {
         "theme-tailwind": "Tailwind",
         "language-label": "語言：",
         "shortened-url": "Shortened URL:",
+        "responseMessage": "Response Message",
     },
     "zh-TW": {
         "title": "Linklie - 短網址",
@@ -36,7 +37,7 @@ const translations = {
         "delete-id-label": "識別碼：",
         "delete-password-label": "密碼：",
         "delete-button": "刪除短網址",
-        "response-title": "回應：",
+        "response-title": "回應",
         "response-tips": "[提示]",
         "theme-label": "選擇主題：",
         "theme-orange": "橙色",
@@ -48,26 +49,31 @@ const translations = {
         "theme-tailwind": "Tailwind",
         "language-label": "Language:",
         "shortened-url": "短網址：",
+        "responseMessage": "回應訊息",
     }
 };
 
-const languageSelector = document.getElementById('language');
-const elementsToTranslate = document.querySelectorAll('[data-i18n]');
+document.addEventListener('DOMContentLoaded', () => {
+    const languageSelector = document.getElementById('language');
+    const elementsToTranslate = document.querySelectorAll('[data-i18n]');
 
-function translatePage(lang) {
-    elementsToTranslate.forEach(el => {
-        const key = el.getAttribute('data-i18n');
-        if (translations[lang][key]) {
-            if (el.tagName === 'TITLE') {
-                document.title = translations[lang][key];
-            } else {
-                el.textContent = translations[lang][key];
+    // Define the translatePage function in the global scope
+    window.translatePage = function(lang) {
+        elementsToTranslate.forEach(el => {
+            const key = el.getAttribute('data-i18n');
+            if (translations[lang][key]) {
+                if (el.tagName === 'TITLE') {
+                    document.title = translations[lang][key];
+                } else {
+                    el.textContent = translations[lang][key];
+                }
             }
-        }
-    });
-}
+        });
+    };
 
-languageSelector.addEventListener('change', (event) => {
-    const selectedLanguage = event.target.value;
-    translatePage(selectedLanguage);
-});
+    // Add event listener for language selection
+    languageSelector.addEventListener('change', (event) => {
+        const selectedLanguage = event.target.value;
+        translatePage(selectedLanguage); // Call the function here
+    });
+});
diff --git a/public/scripts/post.js b/public/scripts/post.js
@@ -28,14 +28,14 @@ document.getElementById('postForm').addEventListener('submit', function(event) {
         return response.json();
     })
     .then(data => {
-        document.getElementById('responseMessage').textContent = JSON.stringify(data, null, 2);
+        document.getElementById('responseMessage').value = 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('responseMessage').value = 'Error: ' + error.message;
         document.getElementById('response-h2').scrollIntoView({ behavior: 'smooth' });
     });
 });
diff --git a/public/styles.css b/public/styles.css
@@ -40,14 +40,15 @@ label {
   margin-bottom: 15px;
 }
 
-input {
+input, textarea {
   width: 100%;
   padding: 10px; 
   box-sizing: border-box;
   border: 1px solid var(--input-border);
   border-radius: 5px;
   transition: border-color 0.3s;
   background-color: var(--container-background);
+  resize: none;
 }
 
 input:focus {
@@ -90,8 +91,4 @@ h2, #responseMessage, input {
 
 .language-selector, .theme-selector {
   margin-bottom: 20px;
-}
-
-input[readonly] {
-  cursor: copy;
 }