laden von erweiterungen implementiert

src/components/vault/button/create.vue

@@ -1,52 +1,51 @@
 <template>
-    <UiDialog :title="t('title')" v-model:open="open">
-        <template #trigger="{ id }">
-            <button
-                class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap"
-                @click="open = true"
-            >
-                <Icon name="mdi:plus" />
-                {{ t("database.create") }}
-            </button>
-        </template>
+  <UiDialog :title="t('title')" v-model:open="open">
+    <template #trigger="{ id }">
+      <button
+        class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap"
+        @click="open = true"
+      >
+        <Icon name="mdi:plus" />
+        {{ t("database.create") }}
+      </button>
+    </template>
 
-        <form class="flex flex-col gap-4" @submit="onCreateAsync">
-            <!--  @keyup.enter="onCreateAsync" -->
-            <UiInput
-                :check-input="check"
-                :label="t('database.label')"
-                :placeholder="t('database.placeholder')"
-                :rules="vaultDatabaseSchema.name"
-                autofocus
-                prepend-icon="mdi:safe"
-                v-model="database.name"
-            />
+    <form class="flex flex-col gap-4" @submit="onCreateAsync">
+      <!--  @keyup.enter="onCreateAsync" -->
+      <UiInput
+        :check-input="check"
+        :label="t('database.label')"
+        :placeholder="t('database.placeholder')"
+        :rules="vaultDatabaseSchema.name"
+        autofocus
+        prepend-icon="mdi:safe"
+        v-model="database.name"
+      />
 
-            <UiInputPassword
-                :check-input="check"
-                :rules="vaultDatabaseSchema.password"
-                prepend-icon="mdi:key-outline"
-                v-model="database.password"
-            />
-        </form>
+      <UiInputPassword
+        :check-input="check"
+        :rules="vaultDatabaseSchema.password"
+        prepend-icon="mdi:key-outline"
+        v-model="database.password"
+      />
+    </form>
 
-        <template #buttons>
-            <UiButton class="btn-error" @click="onClose">
-                {{ t("abort") }}
-            </UiButton>
+    <template #buttons>
+      <UiButton class="btn-error" @click="onClose">
+        {{ t("abort") }}
+      </UiButton>
 
-            <UiButton class="btn-primary" @click="onCreateAsync">
-                {{ t("create") }}
-            </UiButton>
-        </template>
-    </UiDialog>
+      <UiButton class="btn-primary" @click="onCreateAsync">
+        {{ t("create") }}
+      </UiButton>
+    </template>
+  </UiDialog>
 </template>
 
 <script setup lang="ts">
 import { save } from "@tauri-apps/plugin-dialog";
 import { useVaultStore } from "~/stores/vault";
 import { vaultDatabaseSchema } from "./schema";
-import Database from "@tauri-apps/plugin-sql";
 
 const check = ref(false);
 const open = ref();
@@ -54,22 +53,22 @@ const open = ref();
 const { t } = useI18n();
 
 const database = reactive<{
-    name: string;
-    password: string;
-    path: string | null;
-    type: "password" | "text";
+  name: string;
+  password: string;
+  path: string | null;
+  type: "password" | "text";
 }>({
-    name: "",
-    password: "",
-    path: "",
-    type: "password",
+  name: "",
+  password: "",
+  path: "",
+  type: "password",
 });
 
 const initDatabase = () => {
-    database.name = t("database.name");
-    database.password = "";
-    database.path = "";
-    database.type = "password";
+  database.name = t("database.name");
+  database.password = "";
+  database.path = "";
+  database.type = "password";
 };
 
 initDatabase();
@@ -78,69 +77,71 @@ const { add } = useSnackbar();
 const { createAsync } = useVaultStore();
 
 const onCreateAsync = async () => {
-    check.value = true;
+  check.value = true;
 
-    const nameCheck = vaultDatabaseSchema.name.safeParse(database.name);
-    const passwordCheck = vaultDatabaseSchema.password.safeParse(database.password);
+  const nameCheck = vaultDatabaseSchema.name.safeParse(database.name);
+  const passwordCheck = vaultDatabaseSchema.password.safeParse(database.password);
 
-    console.log("checks", database.name, nameCheck, database.password, passwordCheck);
-    if (!nameCheck.success || !passwordCheck.success) return;
+  console.log("checks", database.name, nameCheck, database.password, passwordCheck);
+  if (!nameCheck.success || !passwordCheck.success) return;
 
-    open.value = false;
-    try {
-        database.path = await save({
-            defaultPath: database.name.endsWith(".db") ? database.name : `${database.name}.db`,
-        });
+  open.value = false;
+  try {
+    database.path = await save({
+      defaultPath: database.name.endsWith(".db") ? database.name : `${database.name}.db`,
+    });
 
-        console.log("data", database);
+    console.log("data", database);
 
-        if (database.path && database.password) {
-            const vaultId = await createAsync({
-                path: database.path,
-                password: database.password,
-            });
+    if (database.path && database.password) {
+      const vaultId = await createAsync({
+        path: database.path,
+        password: database.password,
+      });
 
-            console.log("vaultId", vaultId);
-            await navigateTo(useLocaleRoute()({ name: "vaultOverview", params: { vaultId } }));
-        }
-    } catch (error) {
-        console.error(error);
-        add({ type: "error", text: JSON.stringify(error) });
+      console.log("vaultId", vaultId);
+      if (vaultId) {
+        await navigateTo(useLocaleRoute()({ name: "vaultOverview", params: { vaultId } }));
+      }
     }
+  } catch (error) {
+    console.error(error);
+    add({ type: "error", text: JSON.stringify(error) });
+  }
 };
 
 const onClose = () => {
-    open.value = false;
-    initDatabase();
+  open.value = false;
+  initDatabase();
 };
 </script>
 
 <i18n lang="json">
 {
-    "de": {
-        "database": {
-            "label": "Datenbankname",
-            "placeholder": "Passwörter",
-            "create": "Neue Vault anlegen",
-            "name": "Passwörter"
-        },
-        "title": "Neue Datenbank anlegen",
-        "create": "Erstellen",
-        "abort": "Abbrechen",
-        "description": "Haex Vault für deine geheimsten Geheimnisse"
+  "de": {
+    "database": {
+      "label": "Datenbankname",
+      "placeholder": "Passwörter",
+      "create": "Neue Vault anlegen",
+      "name": "Passwörter"
     },
+    "title": "Neue Datenbank anlegen",
+    "create": "Erstellen",
+    "abort": "Abbrechen",
+    "description": "Haex Vault für deine geheimsten Geheimnisse"
+  },
 
-    "en": {
-        "database": {
-            "label": "Databasename",
-            "placeholder": "Databasename",
-            "create": "Create new Vault",
-            "name": "Passwords"
-        },
-        "title": "Create New Database",
-        "create": "Create",
-        "abort": "Abort",
-        "description": "Haex Vault for your most secret secrets"
-    }
+  "en": {
+    "database": {
+      "label": "Databasename",
+      "placeholder": "Databasename",
+      "create": "Create new Vault",
+      "name": "Passwords"
+    },
+    "title": "Create New Database",
+    "create": "Create",
+    "abort": "Abort",
+    "description": "Haex Vault for your most secret secrets"
+  }
 }
 </i18n>

src/components/vault/button/open.vue

@@ -102,6 +102,7 @@ const onLoadDatabase = async () => {
 
 const localePath = useLocalePath();
 
+const { currentVault, currentVaultId } = storeToRefs(useVaultStore());
 const onOpenDatabase = async () => {
   try {
     check.value = true;
@@ -110,7 +111,10 @@ const onOpenDatabase = async () => {
     const passwordCheck = vaultDatabaseSchema.password.safeParse(database.password);
 
     if (!pathCheck.success || !passwordCheck.success || !path) {
-      add({ type: "error", text: "params falsch" });
+      add({
+        type: "error",
+        text: `Params falsch. Path: ${pathCheck.error} | Password: ${passwordCheck.error}`,
+      });
       return;
     }
 
@@ -131,15 +135,14 @@ const onOpenDatabase = async () => {
 
     onClose();
 
+    currentVaultId.value = vaultId;
+    console.log("vault before navigation", currentVault.value, currentVaultId.value, vaultId);
     await navigateTo(
       localePath({
         name: "vaultOverview",
         params: {
           vaultId,
         },
-        query: {
-          showSidebar: "true",
-        },
       })
     );
   } catch (error) {

src/components/vault/card/index.vue

@@ -3,14 +3,19 @@
     <slot name="image" />
 
     <div class="card-header">
-      <h5 class="card-title" v-if="$slots.title">
-        <slot name="title" />
-      </h5>
+      <div v-if="$slots.title || title">
+        <Icon :name="icon" />
+        <h5 v-if="title" class="card-title mb-0">
+          {{ title }}
+        </h5>
+        <slot v-else name="title" />
+      </div>
+      <div class="text-base-content/50">Your journey starts here</div>
     </div>
 
     <div class="card-body">
       <slot />
-
+      aaaaaaaaa
       <div class="card-actions" v-if="$slots.action">
         <slot name="action" />
       </div>
@@ -36,6 +41,8 @@
 <script setup lang="ts">
 const emit = defineEmits(["close", "submit"]);
 
+defineProps<{ title?: string; icon?: string }>();
+
 const { escape, enter } = useMagicKeys();
 
 watchEffect(async () => {