Add a login wall on a few windows, but still no auth / login logic

yet...

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 hpware
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

components/DraggableWindow.vue

@@ -76,7 +76,7 @@ const stopDrag = () => {
   >
     <div
       @mousedown="startDrag"
-      class="bg-gray-700 p-2 cursor-move flex justify-between items-center flex-shrink-0 text-white"
+      class="bg-gray-700 p-2 cursor-move flex justify-between items-center flex-shrink-0 text-white z-[50]"
     >
       <h3 class="font-semibold text-white">{{ title }}</h3>
       <div class="flex flex-row gap-1">

components/app/windows/chatbot.vue

@@ -15,6 +15,7 @@ import {
   BotMessageSquare,
 } from "lucide-vue-next";
 import { Input } from "~/components/ui/input";
+import blurPageBeforeLogin from "~/components/blurPageBeforeLogin.vue";
 import { v4 as uuidv4 } from "uuid";
 const { t } = useI18n();
 const cookie = useCookie("lastChatId");
@@ -53,6 +54,12 @@ onMounted(async () => {
   } else {
     const { data: checkUserChatId } = await useFetch(
       "/api/ai/chat/actions/findUserChatId",
+      {
+        method: "POST",
+        body: {
+          userid: "393393",
+        },
+      },
     );
     cookieChatId.value = checkUserChatId.value;
   }
@@ -66,6 +73,7 @@ onMounted(async () => {
 });
 </script>
 <template>
+  <blurPageBeforeLogin>
     <div class="flex flex-col h-full">
       <div>
         <div
@@ -91,7 +99,10 @@ onMounted(async () => {
             </div>
           </div>
         </div>
-      <div ref="chatContainerRef" class="flex-1 overflow-y-auto p-4 space-y-4">
+        <div
+          ref="chatContainerRef"
+          class="flex-1 overflow-y-auto p-4 space-y-4"
+        >
           <div
             v-for="message in messages"
             class="max-w-[80%] rounded-lg p-3 bg-gray-300/70 rounded-xl"
@@ -113,6 +124,7 @@ onMounted(async () => {
               placeholder="Type a message..."
               v-model="inputMessage"
               @keyup.enter="sendChatData($event)"
+              :disabled="aiGenerating"
             />
             <button
               class="pl-2 pr-2 mr-1 ml-1 bg-black text-white rounded-full hover:bg-gray-700 hover:translate-y-[-4px] transition-all duration-300 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:bg-color-500"
@@ -124,8 +136,7 @@ onMounted(async () => {
             </button>
             <button
               class="pl-2 pr-2 mr-1 ml-1 bg-black text-white rounded-full hover:bg-gray-700 hover:translate-y-[-4px] transition-all duration-300 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:bg-color-500"
-            :disabled="!inputMessage?.trim()"
+              @click=""
-            @click="sendChatData()"
               v-else
             >
               <Square class="w-5 h-5" />
@@ -137,4 +148,5 @@ onMounted(async () => {
         </div>
       </div>
     </div>
+  </blurPageBeforeLogin>
 </template>

components/app/windows/fav.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import BlurPageBeforeLogin from "~/components/blurPageBeforeLogin.vue";
+const { t } = useI18n();
+</script>
+<template>
+  <BlurPageBeforeLogin>
+    <div></div>
+  </BlurPageBeforeLogin>
+</template>

components/blurPageBeforeLogin.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Imports
+const { t } = useI18n();
+// Values
+const allowed = ref(false);
+const error = ref(false);
+const errorMsg = ref("");
+
+onMounted(async () => {
+  // Check Cookie
+  try {
+    const { data, error: sendError } = useFetch("/api/user/checkcookie");
+    if (sendError) {
+      error.value = true;
+    }
+    if (false) {
+      allowed.value = true;
+    } else {
+      allowed.value = false;
+    }
+  } catch (e) {
+    error.value = true;
+    errorMsg.value = e.message;
+  }
+});
+</script>
+<template>
+  <div
+    class="flex flex-col bg-gray-200/50 text-black w-full h-full absolute inset-0 justify-center align-middle text-center z-[20] backdrop-blur-sm"
+  >
+    <div v-if="!allowed && !error" class="m-2">
+      {{ t("error") }}
+    </div>
+    <div v-if="error" class="m-2">
+      <span>{{ errorMsg ? errorMsg : t("systemerror") }}</span>
+    </div>
+  </div>
+  <slot></slot>
+</template>

i18n/locales/en.json

@@ -51,6 +51,8 @@
   "dailybriefing": "Daily Briefing",
   "Welcome": "Welcome",
   "loading": "Loading...",
+  "error": "Oops! You can not use this resoure before logging in.",
+  "systemerror": "Oh cool, you found an error, please contact [at]hwtw on Discord, and I can **try** to fix it",
   "app": {
     "changelangmessage": "Switching the language...",
     "launchtext": "Cooking up the desktop...",

i18n/locales/zh-tw.json

@@ -51,6 +51,8 @@
   "dailybriefing": "今日報導",
   "Welcome": "歡迎",
   "loading": "載入中...",
+  "error": "你還沒登入ㄟ，這個功能要登入才可以用",
+  "systemerror": "ㄚ 你撞上了一個錯誤，可以傳給我嗎？我在DC的帳號是[at]hwtw ",
   "app": {
     "changelangmessage": "正在切換語言中...",
     "launchtext": "系統開機中...",

pages/app/desktop/index.vue

@@ -39,6 +39,7 @@ import AboutWindow from "~/components/app/windows/about.vue";
 import ChatbotWindow from "~/components/app/windows/chatbot.vue";
 import AboutNewsOrgWindow from "~/components/app/windows/aboutNewsOrg.vue";
 import TTYWindow from "~/components/app/windows/tty.vue";
+import FavStaredWindow from "~/components/app/windows/fav.vue";
 import Error404Window from "~/components/app/windows/error404.vue";
 
 // Icons
@@ -137,7 +138,7 @@ const associAppWindow = [
     name: "starred",
     id: "7",
     title: t("app.starred"),
-    component: Error404Window,
+    component: FavStaredWindow,
   },
   {
     name: "chatbot",
@@ -384,6 +385,10 @@ const maxWindow = (windowUUId: string) => {
   console.log(windowIndex);
 };
 
+const toggleMinWindow = (windowUUId: string) => {
+  const windowIndex = "";
+};
+
 // Title
 useSeoMeta({
   title: "Desktop",
@@ -459,7 +464,7 @@ watchEffect((cleanupFn) => {
     v-else
   >
     <!--Menu container-->
-    <div class="flex flex-row g-2 text-gray-400 text-white z-9999">
+    <div class="flex flex-row g-2 text-gray-400 z-9999">
       <button
         @click="toggleMenu"
         class="w-8 h-8 text-white hover:text-blue-500 transition-all duration-100 flex flex-row"
@@ -481,7 +486,7 @@ watchEffect((cleanupFn) => {
             class="flex flex-row items-center gap-x-2 hover:bg-gray-100 transition-all duration-150 px-4 py-1 cursor-pointer group rounded-xl"
           >
             <button
-              @click="unMinWindow(item.windowAssociated)"
+              @click="toggleMinWindow(item.windowAssociated)"
               class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100"
             >
               <span>{{ item.name }}</span>

server/api/user/logout.ts

@@ -0,0 +1,3 @@
+export default defineEventHandler(async (event) => {
+  return "logging out...";
+});