Save settings (unsafe)

.gitignore

@@ -7,6 +7,8 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+.env
+
 node_modules
 dist
 dist-ssr

package.json

@@ -20,6 +20,7 @@
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-http": "~2.5.7",
     "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-store": "~2.4.2",
     "daisyui": "^5.5.18",
     "vue": "^3.5.28",
     "vue-router": "^4.6.4"

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@tauri-apps/plugin-opener':
         specifier: ^2
         version: 2.5.3
+      '@tauri-apps/plugin-store':
+        specifier: ~2.4.2
+        version: 2.4.2
       daisyui:
         specifier: ^5.5.18
         version: 5.5.18
@@ -603,6 +606,9 @@ packages:
   '@tauri-apps/plugin-opener@2.5.3':
     resolution: {integrity: sha512-CCcUltXMOfUEArbf3db3kCE7Ggy1ExBEBl51Ko2ODJ6GDYHRp1nSNlQm5uNCFY5k7/ufaK5Ib3Du/Zir19IYQQ==}
 
+  '@tauri-apps/plugin-store@2.4.2':
+    resolution: {integrity: sha512-0ClHS50Oq9HEvLPhNzTNFxbWVOqoAp3dRvtewQBeqfIQ0z5m3JRnOISIn2ZVPCrQC0MyGyhTS9DWhHjpigQE7A==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -1267,6 +1273,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.10.1
 
+  '@tauri-apps/plugin-store@2.4.2':
+    dependencies:
+      '@tauri-apps/api': 2.10.1
+
   '@types/estree@1.0.8': {}
 
   '@vitejs/plugin-vue@6.0.4(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1))(vue@3.5.28(typescript@5.9.3))':

src-tauri/Cargo.lock

@@ -2748,6 +2748,7 @@ dependencies = [
  "tauri-build",
  "tauri-plugin-http",
  "tauri-plugin-opener",
+ "tauri-plugin-store",
 ]
 
 [[package]]
@@ -4069,6 +4070,22 @@ dependencies = [
  "zbus",
 ]
 
+[[package]]
+name = "tauri-plugin-store"
+version = "2.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5ca1a8ff83c269b115e98726ffc13f9e548a10161544a92ad121d6d0a96e16ea"
+dependencies = [
+ "dunce",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.18",
+ "tokio",
+ "tracing",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "2.10.0"

src-tauri/Cargo.toml

@@ -23,4 +23,5 @@ tauri-plugin-opener = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tauri-plugin-http = "2"
+tauri-plugin-store = "2"
 

src-tauri/capabilities/default.json

@@ -10,8 +10,17 @@
     "opener:default",
     {
       "identifier": "http:default",
-      "allow": [{ "url": "https://*.deep-node.de" }],
-      "deny": [{ "url": "https://private.tauri.app" }]
-    }
+      "allow": [
+        {
+          "url": "https://*.deep-node.de"
+        }
+      ],
+      "deny": [
+        {
+          "url": "https://private.tauri.app"
+        }
+      ]
+    },
+    "store:default"
   ]
-}
+}

src-tauri/src/lib.rs

@@ -7,6 +7,7 @@ fn greet(name: &str) -> String {
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_store::Builder::new().build())
         .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_opener::init())
         .invoke_handler(tauri::generate_handler![greet])

src/composables/useStore.ts

@@ -0,0 +1,33 @@
+import { load, type Store } from '@tauri-apps/plugin-store';
+let storePromise: Promise<Store> | null = null;
+
+function getStore(): Promise<Store> {
+  if (!storePromise) {
+    storePromise = load('store.json', {
+      autoSave: false,
+      defaults: {},
+    });
+  }
+  return storePromise;
+}
+
+export function useStore() {
+  const setValue = async <T>(key: string, value: T) => {
+    console.log('setValue',key,value);
+    const store = await getStore();
+    await store.set(key, value);
+  };
+
+  const getValue = async <T>(key: string) => {
+    console.log('getValue',key);
+    const store = await getStore();
+    return store.get<T>(key);
+  };
+
+  return {
+    setValue,
+    getValue,
+  };
+}
+
+

src/screens/SettingsScreen.vue

@@ -1,10 +1,49 @@
 <script setup lang="ts">
+import { useStore } from '../composables/useStore.ts';
+import { onMounted, ref } from 'vue';
 
+type Settings = {
+  username: string,
+  password: string
+}
+
+const { setValue, getValue } = useStore();
+
+const settingsDefault: Settings = {
+  username: '',
+  password: '',
+}
+const settings = ref<Settings>({...settingsDefault});
+
+const initData = async () => {
+  const readSettings = await getValue<Settings>('settings');
+  settings.value = readSettings ?? {...settingsDefault};
+}
+
+const handleSubmit = async (e: Event) => {
+  const data = Object.fromEntries(new FormData(e.target as HTMLFormElement)) as Settings
+  setValue<Settings>('settings', {
+    username: data.username,
+    password: data.password,
+  });
+  await initData();
+}
+onMounted(initData);
 </script>
 
 <template>
 <div>
-  Settings SCREEN
+  <form @submit.prevent="handleSubmit">
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Username</legend>
+      <input :value="settings.username" type="text" class="input" name="username" />
+    </fieldset>
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Password</legend>
+      <input type="password" :value="settings.password" class="input" name="password" />
+    </fieldset>
+    <button class="btn btn-primary" type="submit">Submit</button>
+  </form>
 </div>
 </template>