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>