implemented device name

src/pages/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="items-center justify-center h-full flex w-full relative">
-    <div class="fixed top-2 right-2">
+  <div class="items-center justify-center flex w-full relative min-h-full">
+    <div class="absolute top-2 right-2">
       <UiDropdownLocale @select="setLocale" />
     </div>
     <div class="flex flex-col justify-center items-center gap-5 max-w-3xl">
-      <UiLogoHaexhub class="bg-primary p-3 size-16 rounded-full" />
+      <UiLogoHaexhub class="bg-primary p-3 size-16 rounded-full shrink-0" />
       <span
         class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center"
       >
@@ -98,12 +98,12 @@ await syncLastVaultsAsync()
   "de": {
     "welcome": "Viel Spass mit",
     "lastUsed": "Zuletzt verwendete Vaults",
-    "sponsors": "Powered by"
+    "sponsors": "Supported by"
   },
   "en": {
     "welcome": "Have fun with",
     "lastUsed": "Last used Vaults",
-    "sponsors": "Powered by"
+    "sponsors": "Supported by"
   }
 }
 </i18n>

src/pages/vault.vue

@@ -1,15 +1,32 @@
 <template>
-  <div class="h-full w-full">
+  <div class="h-full">
     <NuxtLayout name="app">
       <NuxtPage />
     </NuxtLayout>
 
-    <UiDialog v-model:open="showInstanceDialog">
-      <div>
-        Das scheint das erste Mal zu sein, dass du auf diesem Gerät diese Vault
-        öffnest. Bitte gib diesem Gerät einen Namen
-      </div>
-    </UiDialog>
+    <div class="hidden">
+      <UiDialogConfirm
+        :confirm-label="t('newDevice.save')"
+        :title="t('newDevice.title')"
+        @abort="showNewDeviceDialog = false"
+        @confirm="onSetDeviceNameAsync"
+        confirm-icon="mdi:content-save-outline"
+        v-model:open="showNewDeviceDialog"
+      >
+        <div class="flex flex-col gap-4">
+          <p>{{ t('newDevice.intro') }}</p>
+          <p>
+            {{ t('newDevice.setName') }}
+          </p>
+          {{ deviceId }}
+          <UiInput
+            v-model="newDeviceName"
+            :label="t('newDevice.label')"
+            :rules="vaultDeviceNameSchema"
+          />
+        </div>
+      </UiDialogConfirm>
+    </div>
   </div>
 </template>
 
@@ -18,20 +35,68 @@ definePageMeta({
   middleware: 'database',
 })
 
-const showInstanceDialog = ref(false)
+const { t } = useI18n()
+
+const showNewDeviceDialog = ref(false)
+
+const { hostname } = storeToRefs(useDeviceStore())
+
+const newDeviceName = ref<string>('unknown')
 
 const { readNotificationsAsync } = useNotificationStore()
-const { isFirstTimeAsync } = useVaultInstanceStore()
+const { isKnownDeviceAsync } = useDeviceStore()
 const { loadExtensionsAsync } = useExtensionsStore()
+const { setDeviceIdIfNotExistsAsync, addDeviceNameAsync } = useDeviceStore()
+const { deviceId } = storeToRefs(useDeviceStore())
 
 onMounted(async () => {
+  await setDeviceIdIfNotExistsAsync()
   await loadExtensionsAsync()
   await readNotificationsAsync()
 
-  if (await isFirstTimeAsync()) {
-    showInstanceDialog.value = true
+  if (!(await isKnownDeviceAsync())) {
+    console.log('not known device')
+    newDeviceName.value = hostname.value ?? 'unknown'
+    showNewDeviceDialog.value = true
   }
 })
 
-onMounted(() => {})
+const { add } = useSnackbar()
+const onSetDeviceNameAsync = async () => {
+  try {
+    const check = vaultDeviceNameSchema.safeParse(newDeviceName.value)
+    if (!check.success) {
+      console.log('check failed', check.error)
+      return
+    }
+
+    await addDeviceNameAsync({ name: newDeviceName.value })
+    showNewDeviceDialog.value = false
+    add({ type: 'success', text: t('newDevice.success') })
+  } catch (error) {
+    add({ type: 'error', text: t('newDevice.error') })
+  }
+}
 </script>
+
+<i18n lang="yaml">
+de:
+  newDevice:
+    title: Neues Gerät erkannt
+    save: Speichern
+    label: Name
+    intro: Offenbar öffnest du das erste Mal diese Vault auf diesem Gerät.
+    setName: Bitte gib diesem Gerät einen für dich sprechenden Namen. Dadurch kannst du später besser nachverfolgen, welche Änderungen von welchem Gerät erfolgt sind.
+    success: Name erfolgreich gespeichert
+    error: Name konnt nicht gespeichert werden
+
+en:
+  newDevice:
+    title: New device recognized
+    save: Save
+    label: Name
+    intro: This is obviously your first time with this Vault on this device.
+    setName: Please give this device a name that is meaningful to you. This will make it easier for you to track which changes have been made by which device.
+    success: Name successfully saved
+    error: Name could not be saved
+</i18n>

src/pages/vault/[vaultId]/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <div class="h-full text-base-content flex bg-base-200 p-4">
+    aaaa
+    <div class="h-full text-base-content flex bg-base-200">
       <HaexExtensionCard
         v-for="extension in extensionStore.availableExtensions"
         v-bind="extension"

src/pages/vault/[vaultId]/passwords/[[groupId]]/edit.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    {{ group }}
     <HaexPassGroup
       v-model="group"
       mode="edit"
@@ -43,16 +44,15 @@ const onClose = () => {
 
 const { add } = useSnackbar()
 
+const { updateAsync } = usePasswordGroupStore()
+
 const onSaveAsync = async () => {
   try {
     check.value = true
     if (!group.value) return
 
-    console.log('onSave', errors.value)
     if (errors.value.name.length || errors.value.description.length) return
 
-    const { updateAsync } = usePasswordGroupStore()
-
     await updateAsync(group.value)
 
     add({ type: 'success', text: t('change.success') })

src/pages/vault/[vaultId]/passwords/[[groupId]]/item/[itemId].vue

@@ -163,14 +163,16 @@ const { currentItem } = storeToRefs(usePasswordItemStore())
 
 watch(
   currentItem,
-  (newItem) => {
-    item.details = JSON.parse(JSON.stringify(newItem?.details))
-    item.keyValues = JSON.parse(JSON.stringify(newItem?.keyValues))
-    item.history = JSON.parse(JSON.stringify(newItem?.history))
+  () => {
+    console.log('watch currentItem', currentItem.value)
+    if (!currentItem.value) return
+    item.details = JSON.parse(JSON.stringify(currentItem.value?.details))
+    item.keyValues = JSON.parse(JSON.stringify(currentItem.value?.keyValues))
+    item.history = JSON.parse(JSON.stringify(currentItem.value?.history))
     item.keyValuesAdd = []
     item.keyValuesDelete = []
-    item.originalDetails = JSON.stringify(newItem?.details)
-    item.originalKeyValues = JSON.stringify(newItem?.keyValues)
+    item.originalDetails = JSON.stringify(currentItem.value?.details)
+    item.originalKeyValues = JSON.stringify(currentItem.value?.keyValues)
     ignoreChanges.value = false
   },
   { immediate: true },

src/pages/vault/[vaultId]/settings.vue

@@ -40,9 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { eq } from 'drizzle-orm'
 import type { Locale } from 'vue-i18n'
-import { haexSettings } from '~~/src-tauri/database/schemas/vault'
 
 definePageMeta({
   name: 'settings',
@@ -50,24 +48,19 @@ definePageMeta({
 
 const { t, setLocale } = useI18n()
 
-const { currentVault, currentVaultName } = storeToRefs(useVaultStore())
-const { updateVaultNameAsync } = useVaultSettingsStore()
+const { currentVaultName } = storeToRefs(useVaultStore())
+const { updateVaultNameAsync, updateLocaleAsync, updateThemeAsync } =
+  useVaultSettingsStore()
 
 const onSelectLocaleAsync = async (locale: Locale) => {
-  await currentVault.value?.drizzle
-    .update(haexSettings)
-    .set({ key: 'locale', value: locale })
-    .where(eq(haexSettings.key, 'locale'))
+  await updateLocaleAsync(locale)
   await setLocale(locale)
 }
 
 const { currentTheme } = storeToRefs(useUiStore())
 
 const onSelectThemeAsync = async (theme: ITheme) => {
-  await currentVault.value?.drizzle
-    .update(haexSettings)
-    .set({ key: 'theme', value: theme.name })
-    .where(eq(haexSettings.key, 'theme'))
+  await updateThemeAsync(theme.value)
   currentTheme.value = theme
 }
 
@@ -82,9 +75,7 @@ const onSetVaultNameAsync = async () => {
   }
 }
 
-const { isNotificationAllowed } = storeToRefs(useNotificationStore())
 const { requestNotificationPermissionAsync } = useNotificationStore()
-//const { test } = useLastVaultStore()
 </script>
 
 <i18n lang="yaml">