Added saving of token to web worker + Play with dark theme

public/js/workers/auth_worker.js

@@ -0,0 +1,16 @@
+self.onmessage = function (event) {
+  console.log(event.data);
+  const action = event.data.action;
+  switch(action) {
+    case 'save':
+      token = event.data.token;
+      break;
+    case 'load':
+      console.log(token);
+      break;
+    default:
+      console.error('Invalid action');
+      return;
+  }
+  self.postMessage(true);
+}

src/App.vue

@@ -10,7 +10,7 @@ import AuthModal from './components/auth/AuthModal.vue';
 <template>
   <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
   <!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
-  <div class="flex">
+  <div class="flex h-screen bg-white dark:bg-slate-800">
     <Sidebar class="flex-none" />
     <div class="flex-1 m-10">
       <Content />

src/components/Card.vue

@@ -10,16 +10,16 @@ const props = defineProps({
 
 
 <template>
-  <div class="rounded-xl overflow-hidden bg-white mx-auto max-w-md shadow-md hover:shadow-xl transition-shadow md:max-w-2">
+  <div class="rounded-xl overflow-hidden bg-white dark:bg-slate-700 mx-auto max-w-md shadow-md hover:shadow-xl transition-shadow md:max-w-2">
     <div class="md:flex">
       <div class="md:shrink-0">
         <img class="h-48 w-full object-cover md:h-full md:w-48" :src="url">
       </div>
       <div class="p-8">
-        <a class="block mt-1 text-lg leading-tight font-medium text-black hover:underline tracking-wide">
+        <a class="block mt-1 text-lg leading-tight dark:text-white font-medium text-black hover:underline tracking-wide">
           {{title}}
         </a>
-        <p class="mt-2 text-slate-500">
+        <p class="mt-2 text-slate-500 dark:text-slate-300">
           {{description}}
         </p>
       </div>

src/components/auth/AuthModal.vue

@@ -1,6 +1,27 @@
 <script setup>
 import AuthButton from './AuthButton.vue';
- const id = 'authModal';
+const id = 'authModal';
+
+const worker = new Worker('/js/workers/auth_worker.js');
+function saveTokenToWorker() {
+  const token = document.getElementById('tokenTextArea').value;
+  if (token.length <= 0) {
+    return;
+  }
+  worker.postMessage({
+    action: 'save',
+    token
+  });
+  worker.onmessage = function (e) {
+    console.log(e.data);
+  }
+}
+
+function checkTokenContent() {
+  worker.postMessage({
+    action: 'load'
+  });
+}
 </script>
 <template>
 <div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
@@ -28,16 +49,21 @@ import AuthButton from './AuthButton.vue';
             class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
             id="tokenTextArea"
             rows="3"
+            type="password"
             placeholder="Insert token here"></textarea>
         </div>
       </div>
       <div
         class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
+        <button type="button"
+          class="inline-block px-6 py-2.5 bg-slate-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-slate-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-slate-800 active:shadow-lg transition duration-150 ease-in-out"
+          @click="checkTokenContent">Check token</button>
         <button type="button"
           class="inline-block px-6 py-2.5 bg-slate-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-slate-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-slate-800 active:shadow-lg transition duration-150 ease-in-out"
           data-bs-dismiss="modal">Close</button>
         <button type="button"
           data-bs-dismiss="modal"
+          @click="saveTokenToWorker"
           class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">Confirm</button>
       </div>
     </div>