rework error alerts

src/views/passphrase/ResetPassphrase.svelte

@@ -2,31 +2,28 @@
     import { invoke } from '@tauri-apps/api/core';
     import { appState } from '../../lib/state.js';
 
+    import ErrorAlert from '../../ui/ErrorAlert.svelte';
 
-    let modal, error, alert;
 
-    function reset() {
-        try {
-            invoke('reset_session');
-            $appState.sessionStatus = 'empty';
-        }
-        catch (e) {
-            if (alert) alert.shake();
-            error = e;
-        }
+    let modal;
+    let alert;
+
+    async function reset() {
+        await invoke('reset_session');
+        $appState.sessionStatus = 'empty';
     }
+
+
 </script>
 
 
-<button type="button" class="self-end text-sm text-secondary/75 hover:text-secondary hover:underline focus:ring-accent" on:click={modal.showModal()}>
+<button type="button" class="self-end text-sm text-secondary/75 hover:underline focus:ring-accent" on:click={modal.showModal()}>
     Reset passphrase
 </button>
 
 <dialog class="modal" bind:this={modal}>
     <div class="modal-box space-y-6">
-        {#if error}
-            <ErrorAlert>{error}</ErrorAlert>
-        {/if}
+        <ErrorAlert bind:this={alert} />
         <h3 class="text-lg font-bold">Delete all credentials?</h3>
         <div class="space-y-2">
             <p>Credentials are encrypted with your current passphrase and will be lost if the passphrase is reset.</p>
@@ -35,7 +32,9 @@
         <div class="modal-action">
             <form method="dialog" class="flex gap-x-4">
                 <button autofocus class="btn btn-outline">Cancel</button>
-                <button class="btn btn-error" on:click={reset}>Delete</button>
+                <button class="btn btn-error" on:click|preventDefault={() => alert.run(reset)}>
+                    Reset
+                </button>
             </form>
         </div>
     </div>