public/js/workers/auth_worker.js

@@ -1,16 +0,0 @@
-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 h-screen bg-white dark:bg-slate-800">
+  <div class="flex">
     <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 dark:bg-slate-700 mx-auto max-w-md shadow-md hover:shadow-xl transition-shadow md:max-w-2">
+  <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="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 dark:text-white font-medium text-black hover:underline tracking-wide">
+        <a class="block mt-1 text-lg leading-tight font-medium text-black hover:underline tracking-wide">
           {{title}}
         </a>
-        <p class="mt-2 text-slate-500 dark:text-slate-300">
+        <p class="mt-2 text-slate-500">
           {{description}}
         </p>
       </div>

src/components/auth/AuthModal.vue

@@ -1,27 +1,6 @@
 <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"
@@ -49,21 +28,16 @@ function checkTokenContent() {
             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>