From 3d392dd7888e436759bc755f59c6dfc70216f32c 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, 10 Jun 2025 22:52:10 +0800
Subject: [PATCH] Fix open articles in the TTY, as it is broken while in the
 demo. And Added YouTube OnBoarding to the App (Currently in testing and this
 is the beta branch :) Oh also updated some more stuff as well!

---
 components/app/windows/onBoarding.vue | 15 +++++++
 components/app/windows/settings.vue   | 61 ++++++++++++---------------
 components/app/windows/tty.vue        |  4 +-
 pages/desktop.vue                     |  8 ++++
 server/api/user/submitGroqKey.ts      |  2 +-
 5 files changed, 54 insertions(+), 36 deletions(-)
 create mode 100644 components/app/windows/onBoarding.vue

diff --git a/components/app/windows/onBoarding.vue b/components/app/windows/onBoarding.vue
new file mode 100644
index 0000000..df80f06
--- /dev/null
+++ b/components/app/windows/onBoarding.vue
@@ -0,0 +1,15 @@
+<template>
+  <!--YouTube Embed-->
+  <div class="justify-center absolute inset-0 flex flex-col">
+    <iframe
+      width="560"
+      height="315"
+      src="https://www.youtube-nocookie.com/embed/8P3qgVm6m6g?si=0t8eR0wtWv6b3REE"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
diff --git a/components/app/windows/settings.vue b/components/app/windows/settings.vue
index cc20bfa..cd2dc96 100644
--- a/components/app/windows/settings.vue
+++ b/components/app/windows/settings.vue
@@ -174,42 +174,37 @@ const submitUserPassword = async () => {
 };
 </script>
 <template>
-  <div
-    class="justify-center align-center text-center absloute inset-0 p-1"
+  <form
+    class="flex flex-col items-center justify-center h-full align-center text-center absloute inset-0 p-1 bg-gray-200/50 backdrop-blur-sm text-black w-full absolute align-middle z-[20]"
+    @submit.prevent="submitUserPassword"
     v-if="!isLoggedIn"
   >
-    <form
-      class="flex flex-col items-center justify-center h-full"
-      @submit.prevent="submitUserPassword"
-      v-if="!success"
+    <span class="text-2xl text-bold mb-0">{{ t("settings.login") }}</span>
+    <span class="mb-4 text-sm mt-0"> {{ t("settings.loginmessage") }}</span>
+    <div class="">
+      <Input
+        type="text"
+        :placeholder="t('settings.placeholder.user')"
+        class="mb-2 p-2 border rounded"
+        v-model="userAccount"
+        required
+      />
+      <Input
+        type="password"
+        :placeholder="t('settings.placeholder.password')"
+        class="p-2 border rounded mb-2"
+        v-model="userPassword"
+        required
+      />
+    </div>
+    <span v-if="error" class="text-red-600 text-xs m-2"
+      >Error: {{ errormsg }}</span
     >
-      <span class="text-2xl text-bold mb-0">{{ t("settings.login") }}</span>
-      <span class="mb-4 text-sm mt-0"> {{ t("settings.loginmessage") }}</span>
-      <div class="">
-        <Input
-          type="text"
-          :placeholder="t('settings.placeholder.user')"
-          class="mb-2 p-2 border rounded"
-          v-model="userAccount"
-          required
-        />
-        <Input
-          type="password"
-          :placeholder="t('settings.placeholder.password')"
-          class="p-2 border rounded mb-2"
-          v-model="userPassword"
-          required
-        />
-      </div>
-      <span v-if="error" class="text-red-600 text-xs m-2"
-        >Error: {{ errormsg }}</span
-      >
-      <button class="bg-black text-white p-2 rounded transition duration-200">
-        {{ t("settings.loginButton") }}
-      </button>
-    </form>
-  </div>
-  <div class="justify-center align-center text-center" v-if="isLoggedIn">
+    <button class="bg-black text-white p-2 rounded transition duration-200">
+      {{ t("settings.loginButton") }}
+    </button>
+  </form>
+  <div class="justify-center align-center text-center">
     <h1 class="text-3xl text-bold p-2">
       {{ t("settings.greet")
       }}{{ user || userData.userAccount || t("settings.defaultname") }}
diff --git a/components/app/windows/tty.vue b/components/app/windows/tty.vue
index 8767b53..88fdd3a 100644
--- a/components/app/windows/tty.vue
+++ b/components/app/windows/tty.vue
@@ -26,7 +26,7 @@ const printData = (content: any, userinput?: boolean, error?: boolean) => {
 
 const displayHelp = () => {
   const helpContent =
-    "Here are the commands for the Terminal \n\n execute [app]: This command opens an application in the [app] slot. \n article [id]: This command will open a LINE Today article in a window. \n about: This displays the about text window \n clear/clean: Wipe the terminal log. \n help: This help text system :D \n\n For more info, please view the documentation: https://news.yuanhau.com/docs";
+    "Here are the commands for the Terminal \n\n execute [app]: This command opens an application in the [app] slot. \n article [id]: This command will open a LINE Today article in a window. \n about: This displays the about text window \n clear/clean: Wipe the terminal log. \n help: This help text system :D";
   printData(helpContent);
 };
 
@@ -94,7 +94,7 @@ const cleanTTY = () => {
 const openArticle = (inputContent: string) => {
   const match = inputContent.match(/^article\s+[a-zA-Z0-9]{7}$/);
   if (match) {
-    const articleId = match[1].trim();
+    const articleId = match[0].trim();
     emit("openArticles", articleId);
     printData(`Opening article ${articleId}...`);
   } else {
diff --git a/pages/desktop.vue b/pages/desktop.vue
index b4a3839..dcc127d 100644
--- a/pages/desktop.vue
+++ b/pages/desktop.vue
@@ -60,6 +60,7 @@ import NewsViewWindow from "~/components/app/windows/newsView.vue";
 import SettingsWindow from "~/components/app/windows/settings.vue";
 import PrivacyPolicyWindow from "~/components/app/windows/privacypolicy.vue";
 import TOSWindow from "~/components/app/windows/tos.vue";
+import onBoardingWindow from "~/components/app/windows/onBoarding.vue";
 
 // Import Icons
 import {
@@ -203,6 +204,13 @@ const associAppWindow = [
     component: TOSWindow,
     translatable: false,
   },
+  {
+    name: "onboard",
+    id: "14",
+    title: "OnBoarding",
+    component: onBoardingWindow,
+    translatable: false,
+  },
 ];
 
 // OnBoarding
diff --git a/server/api/user/submitGroqKey.ts b/server/api/user/submitGroqKey.ts
index c46f2c6..8bd0ef5 100644
--- a/server/api/user/submitGroqKey.ts
+++ b/server/api/user/submitGroqKey.ts
@@ -2,7 +2,7 @@ import sql from "~/server/components/postgres";
 import getUserTokenMinusSQLInjection from "~/server/components/getUserToken";
 export default defineEventHandler(async (event) => {
   // Check user data.
-  const user = getUserTokenMinusSQLInjection(event);
+  const user = await getUserTokenMinusSQLInjection(event);
   if (user.error.length !== 0) {
     return {
       error: user.error,