From 45397675f51fa2e412ed3dc457605e279a57d537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Tue, 3 Jun 2025 11:01:20 +0800
Subject: [PATCH] Update settings page w/ deleting your account. and update
 translations.

---
 components/app/windows/news.vue     |  8 ++-
 components/app/windows/settings.vue | 89 +++++++++++++++++++++++++++--
 i18n/locales/en.json                | 23 ++++++--
 i18n/locales/zh-tw.json             | 23 ++++++--
 pages/desktop.vue                   |  4 +-
 server/api/publishers/lt/[slug].ts  | 33 +++++------
 6 files changed, 147 insertions(+), 33 deletions(-)

diff --git a/components/app/windows/news.vue b/components/app/windows/news.vue
index 0d15af5..5c9e28d 100644
--- a/components/app/windows/news.vue
+++ b/components/app/windows/news.vue
@@ -189,8 +189,8 @@ const openNews = (url: string, titleName: string) => {
   emit("openArticles", url, titleName);
 };
 
-const openPublisher = (text: string) => {
-  emit("openNewsSourcePage", text);
+const openPublisher = (slug: string, title: string) => {
+  emit("openNewsSourcePage", slug, title);
 };
 </script>
 <template>
@@ -243,7 +243,9 @@ const openPublisher = (text: string) => {
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger>
-                    <button @click="openPublisher(item.publisherId)">
+                    <button
+                      @click="openPublisher(item.publisherId, item.publisher)"
+                    >
                       {{ item.publisher }}
                     </button>
                   </TooltipTrigger>
diff --git a/components/app/windows/settings.vue b/components/app/windows/settings.vue
index d2d3d63..d2470aa 100644
--- a/components/app/windows/settings.vue
+++ b/components/app/windows/settings.vue
@@ -45,12 +45,41 @@ const checkValidApiKey = () => {
   }
   isCorrect.value = groqApiKeyRegex.test(apiKey);
 };
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+const showDeleteDialog = ref(false);
+const showLogoutDialog = ref(false);
+
+const confirmDelete = async () => {
+  await deleteAccount();
+  showDeleteDialog.value = false;
+};
+
+const confirmLogout = async () => {
+  showLogoutDialog.value = false;
+};
+const deleteAccount = async () => {
+  const req = await fetch("/api/user/delete", {
+    method: "DELETE",
+  });
+};
 </script>
 <template>
   <div class="justify-center align-center text-center">
     <div class="">Greetings, {{ user }}</div>
     <div class="flex flex-row text-center align-center justify-center">
-      <span class="text-md p-1 text-nowrap">Your Groq API:&nbsp;</span>
+      <span class="text-md p-1 text-nowrap"
+        >{{ t("settings.yourgroqapi") }}:&nbsp;</span
+      >
       <Input
         type="text"
         class="h-6 m-1 py-3 rounded"
@@ -73,13 +102,65 @@ const checkValidApiKey = () => {
         class="p-1 text-sm bg-gray-400/60 rounded"
         @click="submitCustomApiKey"
       >
-        Submit
+        {{ t("settings.submit") }}
       </button>
     </div>
     <div class="bg-gray-200/70 p-2 m-2 w-full">
-      <button @click="logoutAction">Logout</button>
+      <Dialog v-model:open="showLogoutDialog">
+        <DialogTrigger asChild>
+          <Button variant="outline">{{ t("settings.logout") }}</Button>
+        </DialogTrigger>
+        <DialogContent class="!border-0 !bg-black !rounded">
+          <DialogHeader>
+            <DialogTitle>{{ t("settings.logout") }}</DialogTitle>
+            <DialogDescription
+              >Are you sure you want to logout?
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button @click="showLogoutDialog = false" variant="outline">
+              {{ t("popup.cancel") }}
+            </Button>
+            <Button @click="confirmLogout" variant="destructive">
+              {{ t("popup.confirm") }}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+
+    <div>
+      <h3 class="text-red-600">{{ t("settings.dangerzone") }}</h3>
+      <div class="bg-gray-200/70 p-2 m-2 w-full rounded">
+        <Dialog v-model:open="showDeleteDialog">
+          <DialogTrigger asChild>
+            <Button variant="destructive">
+              {{ t("settings.deleteaccount") }}
+            </Button>
+          </DialogTrigger>
+          <DialogContent class="!border-0 !bg-black !rounded">
+            <DialogHeader>
+              <DialogTitle>{{ t("settings.deleteaccount") }}</DialogTitle>
+              <DialogDescription>
+                This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button @click="showDeleteDialog = false" variant="outline">
+                {{ t("popup.cancel") }}
+              </Button>
+              <Button @click="confirmDelete" variant="destructive">
+                {{ t("settings.deleteaccount") }}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
     </div>
     <hr />
-    <div class="justiy-center align-center text-center">Settings v0.0.1</div>
+    <div class="justiy-center align-center text-center">
+      {{ t("app.settings") }} v0.0.2
+    </div>
   </div>
 </template>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 60dd8a0..031db6a 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -31,10 +31,10 @@
         "mobileApp": "Is there a mobile app?"
       },
       "whydes": "Taiwan news mostly came from China-controlled / China-official media or from reporters who uses inappropriate content to farm clicks and engragement. Or just made up news by the reporters as the Taiwan's NCC doesn't give a shit about the fake news they are promoting as they think it doesn't matter, this platform is a wake up call to the NCC to start to moderate news media corporations that do fake news.",
-      "howdes": "We use web scraping to search for the latest news, and store it into a postgres database, for people to access, and the crawler is not like the OpenAI or any AI company, we just load the page once, and that's it nothing else on your page.",
-      "supportedLocationNews": "We currently only support news from Taiwan for now, but if you want more, you can contribute to the project by adding more news sources to the python scraping scripts.",
+      "howdes": "We use web scraping to search for the latest news, and store it into the system's cache for people to access. This saves server loading time.",
+      "supportedLocationNews": "We will only support Taiwan news, if your country has Line today, you can fork this project and change some of the scraping systems.",
       "userData": "We handle your account and password in a secure way, with two encryption methods, one during transit to the server (and also SQL injecton), one saving to the database. For other user data, it is currently NOT end-to-end encrypted, like your AI chat history, your stars, and your name & email. In the near future, we will add E2E encryption (and I can also pratice).",
-      "mobileApp": "I will make a application using React Native in the future, but for now, mobile is not supported, but you can still kinda use it, it is just not pleasant."
+      "mobileApp": "I will make a application using React Native in the future, but for now, mobile is not supported."
     },
     "cards": {
       "title": {
@@ -65,7 +65,7 @@
     "news": "News",
     "sources": "Sources",
     "about": "About this website",
-    "settings": "settings",
+    "settings": "Settings",
     "leave": "Leave",
     "login": "Login",
     "license": "License",
@@ -77,6 +77,21 @@
     "newsview": "News View",
     "areyousure": "Are you sure?"
   },
+  "settings": {
+    "yourgroqapi": "Your Groq API",
+    "logout": "Logout",
+    "deleteaccount": "Delete your account",
+    "dangerzone": "DANGER ZONE",
+    "submit": "Submit"
+  },
+  "popuptext": {
+    "logout": "Are you sure you want to logout?",
+    "delete": " This action cannot be undone. This will permanently delete your account and remove your data from our servers."
+  },
+  "popup": {
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  },
   "tools": {
     "title": "Tools",
     "name": {
diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json
index 30b4eb8..d1fac2e 100644
--- a/i18n/locales/zh-tw.json
+++ b/i18n/locales/zh-tw.json
@@ -31,10 +31,10 @@
         "mobileApp": "這個會做手機版嗎？"
       },
       "whydes": "台灣的新聞是要痲是來自中國控制/中國官方的媒體，或是來自只想獲得點閱的記者。這個平台是要讓台灣的NCC知道，發布假新聞就應該被調查，而不是放著不管。",
-      "howdes": " 我們使用使用 Python 寫的網頁爬蟲來搜尋最新的新聞，並將其存入Postgres資料庫中。",
-      "supportedLocationNews": "We currently only support news from Taiwan for now, but if you want more, you can contribute to the project by adding more news sources to the python scraping scripts.",
-      "userData": "We handle your account and password in a secure way, with two encryption methods, one during transit to the server (and also SQL injecton), one saving to the database. For other user data, it is currently NOT end-to-end encrypted, like your AI chat history, your stars, and your name & email. In the near future, we will add E2E encryption (and I can also pratice).",
-      "mobileApp": "I will make a application using React Native in the future, but for now, mobile is not supported, but you can still kinda use it, it is just not pleasant."
+      "howdes": " 我們使用使用網頁爬蟲來搜尋最新的新聞，並將其存入系統的快取記憶體中。這樣可以省伺服器的運行時間",
+      "supportedLocationNews": "這個專案只會支援台灣新聞，如果你要加其他有Line Today的新聞的話，可以Fork這個專案，並更改。",
+      "userData": "這個網站使用雙重加密，第一次是使用SHA-512在使用者端加密，第二次就使在伺服器使用 argon2 加密，並把使用者的帳號存入系統裡。",
+      "mobileApp": "可能會，但現在手機不支援。"
     },
     "cards": {
       "title": {
@@ -77,6 +77,21 @@
     "newsview": "新聞",
     "areyousure": "你確定？"
   },
+  "settings": {
+    "yourgroqapi": "你的Groq API",
+    "logout": "登出",
+    "deleteaccount": "刪除你的帳號",
+    "dangerzone": "DANGER ZONE",
+    "submit": "送出"
+  },
+  "popup": {
+    "cancel": "取消",
+    "confirm": "確認"
+  },
+  "popuptext": {
+    "logout": "你確定要登出?",
+    "delete": "此操作無法撤銷。這將永久刪除您的帳戶並從我們的伺服器中刪除您的資料。"
+  },
   "tools": {
     "title": "工具",
     "name": {
diff --git a/pages/desktop.vue b/pages/desktop.vue
index 72e0a1c..686f402 100644
--- a/pages/desktop.vue
+++ b/pages/desktop.vue
@@ -460,10 +460,10 @@ const openArticles = async (slug: string, titleName?: string) => {
   }, 1000);
 };
 
-const openNewsSourcePage = async (slug: string) => {
+const openNewsSourcePage = async (slug: string, title: string) => {
   openingAppViaAnApp.value = true;
   passedValues.value = slug;
-  const titleNameFinal = slug ? "關於" + slug : t("app.aboutNewsOrg");
+  const titleNameFinal = title ? "關於" + title : t("app.aboutNewsOrg");
   findAndOpenWindow("aboutNewsOrg", titleNameFinal);
 
   setTimeout(() => {
diff --git a/server/api/publishers/lt/[slug].ts b/server/api/publishers/lt/[slug].ts
index 148724a..1341b91 100644
--- a/server/api/publishers/lt/[slug].ts
+++ b/server/api/publishers/lt/[slug].ts
@@ -30,23 +30,24 @@ export default defineEventHandler(async (event) => {
       "";
     const bgImage = html("figure.keyVisual img").attr("srcset") || "";
     const articles = [];
-    const regexArticleLinks = /[a-zA-Z0-9]{7}/g
+    const regexArticleLinks = /[a-zA-Z0-9]{7}/g;
     const otherArticles = <any[]>[];
-    html("a.ltcp-link")
-      .each((i, element) => {
-        const articleLink = html(element).attr("href");
-        const articleTitle = html(element).find("h3.header").text();
-        const date = html(element).find("div._articleCard div.css-wqleh6 span").text();
-        if (articleLink && articleTitle) {
-            const articleSlug = articleLink.matchAll(regexArticleLinks);
-          otherArticles.push({
-            index: i,
-            title: articleTitle,
-            link: articleSlug,
-            date: date,
-          });
-        }
-      });
+    html("a.ltcp-link").each((i, element) => {
+      const articleLink = html(element).attr("href");
+      const articleTitle = html(element).find("h3.header").text();
+      const date = html(element)
+        .find("div._articleCard div.css-wqleh6 span")
+        .text();
+      if (articleLink && articleTitle) {
+        const articleSlug = articleLink.matchAll(regexArticleLinks);
+        otherArticles.push({
+          index: i,
+          title: articleTitle,
+          link: articleSlug,
+          date: date,
+        });
+      }
+    });
     return {
       name: newsOrgName,
       description: description,