Made a simple custom groq api thingy (just the settings page)

components/app/windows/settings.vue

@@ -1,28 +1,69 @@
 <script setup lang="ts">
-const user = ref();
-const userToken = localStorage.getItem("token");
+import { BadgeCheckIcon, OctagonAlertIcon } from "lucide-vue-next";
+import { Input } from "~/components/ui/input";
 const { t, locale } = useI18n();
+const user = ref();
 onMounted(async () => {
-  const req = await fetch("/api/user/validateUserToken", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      token: userToken,
-      lang: locale,
-      page: "settings",
-    }),
-  });
+  const req = await fetch("/api/user/validateUserToken");
   const res = req.json();
   user.value = res;
 });
 
 const logoutAction = () => {};
+const groqApiKeyRegex = /^gsk_[a-zA-Z0-9]{52}$/; 
+const customApiKey = ref();
+const isCorrect = ref(false);
+const submitCustomApiKey = async () => {
+  if (!isCorrect.value) {
+    checkValidApiKey();
+    if (!isCorrect.value) {
+      return;
+    }
+  }
+  const apiKey = customApiKey.value;
+  try {
+    const sendApi = await fetch("/api/ai/loadCustomGroqApi", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({}),
+    });
+    const data = await sendApi.json();
+    if (data.error) {
+    }
+  } catch (e) {}
+};
+const checkValidApiKey = () => {
+  const apiKey = customApiKey.value;
+  if (!apiKey) {
+    isCorrect.value = false;
+    return;
+  }
+  isCorrect.value = groqApiKeyRegex.test(apiKey);
+};
 </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>
+      <Input
+        type="text"
+        class="h-6 m-1 py-3 rounded"
+        v-model="customApiKey"
+        placeholder="gsk_..."
+        v-on:mouseover="checkValidApiKey"
+        v-on:keypress="checkValidApiKey"
+        v-on:mouseleave="checkValidApiKey"
+      />
+      <!--If it is a valid api key or not.-->
+      <BadgeCheckIcon v-if="isCorrect" class="w-8 h-8 p-1/2 mr-1 text-green-700"/>
+      <OctagonAlertIcon v-if="!isCorrect" class="w-8 h-8 p-1/2 mr-1 text-red-700"/>
+      <button class="p-1 text-sm  bg-gray-400/60 rounded" @click="submitCustomApiKey">
+        Submit
+      </button>
+    </div>
     <div class="bg-gray-200/70 p-2 m-2 w-full">
       <button @click="logoutAction">Logout</button>
     </div>

components/app/windows/user.vue

@@ -29,7 +29,6 @@ const submitUserPassword = async () => {
 
   if (!res.error) {
     error.value = false;
-    localStorage.setItem("token", res.token);
     success.value = true;
     console.log(res);
     userAccount.value = "";

components/blurPageBeforeLogin.vue

@@ -9,20 +9,8 @@ const emit = defineEmits(["windowopener", "error", "loadValue"]);
 
 try {
   // 喔 我沒有加 await :( 難怪有問題
-  const token = localStorage.getItem("token");
   const { data, error: sendError } = await useFetch(
     "/api/user/validateUserToken",
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        token: token,
-        lang: locale,
-        page: "a_window_application_using_blurPageBeforeLogin_component",
-      }),
-    },
   );
   if (sendError.value) {
     error.value = true;

server/api/ai/loadCustomGroqApi.ts

@@ -0,0 +1,21 @@
+import sql from "~/server/components/postgres";
+export default defineEventHandler(async (event) => {
+  if (event.method !== "POST") {
+    return {
+      error: "ERR_METHOD_NOT_ALLOWED",
+    };
+  }
+  const body = readBody(event);
+  if (!body.apiKey) {
+    return {
+      error: "ERR_API_KEY_REQUIRED",
+    };
+  }
+  const readUserToken = getCookie(event, "token");
+  if (!readUserToken) {
+    return {
+      error: "ERR_NOT_USER_LOGIN",
+    };
+  }
+  const checkUser = await sql``;
+});

server/api/publishers/lt/[slug].ts

@@ -29,15 +29,16 @@ export default defineEventHandler(async (event) => {
       html("div.editor div figure img").attr("src") ||
       "";
     const articles = [];
-    const otherArticles = html("section.moduleContainer div");
-    for (const item in otherArticles) {
-
-    }
+    const otherArticles = html("section.moduleContainer div").html();
+    /*for (const item in otherArticles) {
+        console.log(item);
+        console.log("-");
+    }*/
     return {
       name: newsOrgName,
       description: description,
       logo: logo,
-      articles: []
+      articles: otherArticles,
     };
   } catch (e) {
     console.log(e);

server/api/user/login.ts

@@ -68,9 +68,9 @@ export default defineEventHandler(async (event) => {
         INSERT INTO usertokens (user, token)
         VALUES ('${fetchUserInfo[0].username}', '${newToken}')
       `;
+    setCookie(event, "token", newToken);
     return {
       user: fetchUserInfoAgain,
-      token: newToken,
     };
   } catch (e) {
     console.log(e);

server/api/user/logout.ts

@@ -4,12 +4,7 @@ export default defineEventHandler(async (event) => {
   const nowDate = new Date().toLocaleString();
   try {
     if (loginCookie) {
-      deleteCookie(event, "session");
-      setCookie(event, "lastCheckCookie", nowDate, {
-        httpOnly: true,
-        secure: process.env.NODE_ENV === "production",
-        path: "/",
-      });
+      deleteCookie(event, "token");
       return {
         success: true,
         error: null,

server/api/user/validateUserToken.post.ts

@@ -2,11 +2,11 @@ import sql from "~/server/components/postgres";
 
 export default defineEventHandler(async (event) => {
   const body = await readBody(event);
-  const token = body.token;
+  const token = getCookie(event, "token");
   if (!token) {
     return {
-      error: "NO_TOKEN_GIVEN",
-      requested_action: "SHOW_WARNING",
+      error: "INVALID_TOKEN",
+      requested_action: "LOGOUT_USER",
     };
   }
   const checkIsUUIDRegex =