Siklos/vue-playground
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Hydroxycarbamide 2022-06-04 00:12:18 +02:00
parent 7d893cb204
commit 12f9ad6c06
4 changed files with 47 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

16
public/js/workers/auth_worker.js Normal file
View file

@ -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);
}

2
src/App.vue
View file

@ -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 />

6
src/components/Card.vue
View file

@ -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>

28
src/components/auth/AuthModal.vue
View file

@ -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>