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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
|
<template>
<main id="injected-root">
<!-- Global password/confirm promps -->
<ConfirmPrompt />
<PasswordPrompt />
<notifications class="toaster" group="form" position="top-right" />
<div class="container flex w-full p-4 mx-auto mt-8 text-black dark:text-white">
<div class="w-full max-w-4xl mx-auto">
<div class="">
<h2>NVault</h2>
</div>
<TabGroup :selected-index="selectedTab" @change="selectTab" >
<TabList class="flex gap-3 pb-2 border-b border-gray-300 dark:border-dark-500">
<Tab v-slot="{ selected }">
<button class="tab-title" :class="{ selected }">
Identities
</button>
</Tab>
<Tab v-slot="{ selected }">
<button class="tab-title" :class="{ selected }">
Account
</button>
</Tab>
<Tab v-slot="{ selected }">
<button class="tab-title" :class="{ selected }">
Activity
</button>
</Tab>
<Tab v-slot="{ selected }">
<button class="tab-title" :class="{ selected }">
Privacy
</button>
</Tab>
<Tab v-slot="{ selected }">
<button class="tab-title" :class="{ selected }">
Settings
</button>
</Tab>
<Tab>
<!-- Hidden for editing -->
</Tab>
<div class="m-auto">
<div class="">
<!-- Add spinner -->
</div>
</div>
<div class="hidden my-auto text-sm font-semibold sm:block">
<div v-if="userName">
{{ userName }}
</div>
<div v-else>
<div>
Sign In
</div>
</div>
</div>
<div class="ml-auto sm:ml-0">
<button class="rounded btn xs" @click="toggleDark()" >
<fa-icon v-if="darkMode" icon="sun"/>
<fa-icon v-else icon="moon" />
</button>
</div>
</TabList>
<TabPanels>
<TabPanel class="mt-4">
<Identities :all-keys="allKeys" @edit-key="editKey"/>
</TabPanel>
<TabPanel> <Account/> </TabPanel>
<TabPanel> <Activity/> </TabPanel>
<TabPanel> <Privacy/> </TabPanel>
<TabPanel> <SiteSettings/> </TabPanel>
<TabPanel>
<div class="flex flex-col px-2 mt-4">
<div class="absolute mx-auto">
<h4>Edit Identity</h4>
</div>
<div class="ml-auto">
<button class="rounded btn sm" @click.self="doneEditing">
<fa-icon class="mr-2" icon="chevron-left"/>
Back
</button>
</div>
<div class="flex flex-col mx-auto mt-2">
<div class="text-sm break-all">
Internal Id : {{ keyBuffer?.Id }}
</div>
<div class="text-sm break-all">
Public Key : {{ keyBuffer?.PublicKey }}
</div>
<div class="flex flex-col w-full max-w-md mx-auto mt-3">
<div class="">
<div class="text-sm">User Name</div>
<input class="w-full input" type="text" v-model="keyBuffer.UserName"/>
</div>
<div class="gap-2 my-3 ml-auto">
<button class="rounded btn sm primary" @click="onUpdate">Update</button>
</div>
</div>
</div>
</div>
</TabPanel>
</TabPanels>
</TabGroup>
</div>
</div>
</main>
</template>
<script setup lang="ts">
import { computed, ref, watchEffect } from "vue";
import {
TabGroup,
TabList,
Tab,
TabPanels,
TabPanel,
} from '@headlessui/vue'
import { apiCall, configureNotifier } from '@vnuge/vnlib.browser';
import { storeToRefs } from "pinia";
import { useQuery, type NostrPubKey } from '../../features/';
import { notify } from "@kyvg/vue3-notification";
import { toSafeInteger } from "lodash";
import { useStore } from "../store";
import Account from "./components/Account.vue";
import ConfirmPrompt from "../../components/ConfirmPrompt.vue";
import PasswordPrompt from "../../components/PasswordPrompt.vue";
import Activity from "./components/Activity.vue";
import SiteSettings from './components/SiteSettings.vue';
import Identities from './components/Identities.vue';
import Privacy from "./components/Privacy.vue";
//Configure the notifier to use the notification library
configureNotifier({ notify, close: notify.close })
const store = useStore()
const { identity } = store.plugins
const { allKeys, darkMode, userName } = storeToRefs(store)
const keyBuffer = ref<Partial<NostrPubKey>>({} as NostrPubKey)
const tabIdQuery = useQuery('t')
const selectedTab = computed(() => toSafeInteger(tabIdQuery.asRef.value));
const selectTab = (id: number) => tabIdQuery.set(id.toString())
const editKey = (key: NostrPubKey) =>{
//Goto hidden tab
selectedTab.value = 5
//Set selected key
keyBuffer.value = { ...key }
}
const doneEditing = () =>{
//Goto hidden tab
selectedTab.value = 0
//Set selected key
keyBuffer.value = {}
}
const onUpdate = async () =>{
await apiCall(async ({ toaster }) => {
//Update identity
await identity.updateIdentity(keyBuffer.value)
//Show success
toaster.general.success({
'title':'Success',
'text': `Successfully updated ${keyBuffer.value!.UserName}`
})
})
//Goto hidden tab
selectedTab.value = 0
//Set selected key
keyBuffer.value = {}
}
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'));
</script>
<style lang="scss">
main {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.toaster{
position: fixed;
top: 15px;
right: 0;
z-index: 9999;
max-width: 230px;
}
.tab-title{
@apply border-b-2 border-transparent dark:text-gray-200;
&.selected{
@apply dark:border-gray-200 border-black;
}
}
.id-card{
@apply flex md:flex-row flex-col gap-2 p-3 text-sm duration-75 ease-in-out border-2 rounded-lg shadow-md cursor-pointer;
@apply bg-white dark:bg-dark-700 border-gray-200 hover:border-gray-400 dark:border-dark-500 hover:dark:border-dark-200;
&.selected{
@apply border-primary-500 hover:border-primary-500;
}
}
.text-color-background{
@apply text-gray-400 dark:text-gray-500;
}
</style>
|
