1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<template>
<div
id="injected-root"
class="flex flex-col text-left w-[20rem] min-h-[25rem]"
>
<div class="flex flex-row w-full gap-2 p-1.5 bg-black text-white dark:bg-dark-600 shadow">
<div class="flex flex-row flex-auto my-auto">
<div class="my-auto mr-2">
<img class="h-6" src="/icons/32.png" />
</div>
<h3 class="block my-auto">NVault</h3>
<div class="px-3 py-.5 m-auto text-sm rounded-full h-fit active-badge" :class="[isTabAllowed ? 'active' : 'inactive']">
{{ isTabAllowed ? 'Active' : 'Inactive' }}
</div>
</div>
<div class="my-auto" v-if="loggedIn">
<button class="rounded btn xs" @click.prevent="logout">
<fa-icon icon="arrow-right-from-bracket" />
</button>
</div>
<div class="my-auto">
<button class="rounded btn xs" @click="toggleDark" >
<fa-icon class="w-4" v-if="darkMode" icon="sun"/>
<fa-icon class="w-4" v-else icon="moon" />
</button>
</div>
<div class="my-auto">
<button class="rounded btn xs" @click="openOptions">
<fa-icon :icon="['fas', 'gear']"/>
</button>
</div>
</div>
<div v-if="!loggedIn">
<Login></Login>
</div>
<div v-else class="flex justify-center">
<div class="w-full px-3 m-auto">
<div class="text-sm text-center">
{{ userName }}
</div>
<div class="">
<label class="mb-0.5 text-sm dark:text-dark-100">
Identity
</label>
<IdentitySelection></IdentitySelection>
</div>
<div class="w-full mt-1">
<div class="flex flex-col">
<div class="flex flex-row gap-2 p-1.5 bg-gray-100 border border-gray-200 dark:bg-dark-800 dark:border-dark-400">
<div class="text-sm break-all">
{{ pubKey ?? 'No key selected' }}
</div>
<div class="my-auto ml-auto cursor-pointer" :class="{'text-primary-500': copied }">
<fa-icon class="mr-1" icon="copy" @click="copy(pubKey!)"/>
</div>
</div>
</div>
</div>
<div class="mt-4">
<label class="block mb-1 text-xs text-left dark:text-dark-100" >
Current origin
</label>
<div v-if="isOriginProtectionOn" class="flex flex-row w-full gap-2">
<input :value="currentOrigin" class="flex-1 p-1 mx-0 text-sm input" readonly/>
<button v-if="isTabAllowed" class="btn xs" @click="store.dissallowOrigin()">
<fa-icon icon="minus" />
</button>
<button v-else class="btn xs" @click="store.allowOrigin()">
<fa-icon icon="plus" />
</button>
</div>
<div v-else class="text-xs text-center">
<span class="">Tracking protection disabled</span>
</div>
</div>
</div>
</div>
<notifications class="toaster" group="form" position="top-right" />
</div>
</template>
<script setup lang="ts">
import { computed, watchEffect } from "vue";
import { storeToRefs } from "pinia";
import { useStore } from "../../store";
import { apiCall, configureNotifier } from "@vnuge/vnlib.browser";
import { useClipboard } from '@vueuse/core'
import { notify } from "@kyvg/vue3-notification";
import { runtime } from "webextension-polyfill";
import Login from "./Login.vue";
import IdentitySelection from "./IdentitySelection.vue";
configureNotifier({notify, close:notify.close})
const store = useStore()
const { loggedIn, selectedKey, userName, darkMode, isTabAllowed, currentOrigin, isOriginProtectionOn } = storeToRefs(store)
const { copy, copied } = useClipboard()
const pubKey = computed(() => selectedKey!.value?.PublicKey)
const openOptions = () => runtime.openOptionsPage();
const toggleDark = () => store.toggleDarkMode()
//Watch for dark mode changes and update the body class
watchEffect(() => darkMode.value ? document.body.classList.add('dark') : document.body.classList.remove('dark'));
const logout = () =>{
apiCall(async ({ toaster }) =>{
await store.logout()
toaster.general.success({
'title':'Success',
'text': 'You have been logged out'
})
})
}
</script>
|
