initial rough impl

examples/api/src/App.svelte

@@ -23,6 +23,7 @@
   import Biometric from './views/Biometric.svelte'
   import Geolocation from './views/Geolocation.svelte'
   import Haptics from './views/Haptics.svelte'
+  import SecureStorage from './views/SecureStorage.svelte'
 
   import { onMount, tick } from 'svelte'
   import { ask } from '@tauri-apps/plugin-dialog'
@@ -103,6 +104,11 @@
       component: Store,
       icon: 'i-codicon-file-code'
     },
+    {
+      label: 'SecureStorage',
+      component: SecureStorage,
+      icon: 'i-codicon-file-code'
+    },
     !isMobile && {
       label: 'Updater',
       component: Updater,
@@ -213,9 +219,9 @@
       ...r,
       {
         html:
-          `<pre><strong class="text-accent dark:text-darkAccent">[${new Date().toLocaleTimeString()}]:</strong> ` +
-          (typeof value === 'string' ? value : JSON.stringify(value, null, 1)) +
-          '</pre>'
+          `<pre><strong class="text-accent dark:text-darkAccent">[${new Date().toLocaleTimeString()}]:</strong> `
+          + (typeof value === 'string' ? value : JSON.stringify(value, null, 1))
+          + '</pre>'
       }
     ])
     await tick()
@@ -229,9 +235,9 @@
       ...r,
       {
         html:
-          `<pre><strong class="text-accent dark:text-darkAccent">[${new Date().toLocaleTimeString()}]:</strong> ` +
-          html +
-          '</pre>'
+          `<pre><strong class="text-accent dark:text-darkAccent">[${new Date().toLocaleTimeString()}]:</strong> `
+          + html
+          + '</pre>'
       }
     ])
     await tick()

examples/api/src/views/SecureStorage.svelte

@@ -0,0 +1,54 @@
+<script>
+  import { onMount } from 'svelte'
+  import { getString, setString } from '@tauri-apps/plugin-secure-storage'
+
+  export let onMessage
+
+  let key
+  let value
+  let output
+
+  async function read(key) {
+    try {
+      output = await getString(key)
+    } catch (error) {
+      onMessage(error)
+    }
+  }
+
+  async function write(key, value) {
+    try {
+      await setString(key, value)
+    } catch (error) {
+      onMessage(error)
+    }
+  }
+
+  function reset() {
+    output = ''
+  }
+</script>
+
+<div class="flex flex-col childre:grow gap-1">
+  <div class="flex flex-col flex-row-md gap-4">
+    <div class="flex items-center gap-1">
+      Key:
+      <input class="grow input" bind:value={key} />
+    </div>
+
+    <div class="flex items-center gap-1">
+      Value:
+      <input class="grow input" bind:value />
+    </div>
+
+    <div>
+      <button class="btn" on:click={() => write(key, value)}>Write</button>
+      <button class="btn" on:click={() => read(key)}>Read</button>
+      <button class="btn" on:click={() => reset()}>Reset Output</button>
+    </div>
+  </div>
+
+  <div>
+    Output: {output}
+  </div>
+</div>