rework error alerts

src/views/passphrase/EnterPassphrase.svelte

@@ -14,48 +14,68 @@
 
     const dispatch = createEventDispatcher();
 
-    let alert, saving;
+    let alert;
+    let saving = false;
     let passphrase = '';
     let confirmPassphrase = '';
-    let error = null;
 
-    function confirm() {
+    // onChange only fires when an input loses focus, so always set the error if not set
+    function onChange() {
+        console.log(`onChange: passphrase=${passphrase}, confirmPassphrase=${confirmPassphrase}`)
         if (passphrase !== confirmPassphrase) {
-            error = 'Passphrases do not match.';
+            alert.setError('Passphrases do not match.');
+        }
+        else {
+            alert.setError(null);
+        }
+    }
+    // onInput fires on every keystroke, so only dismiss the error, don't create it
+    function onInput() {
+        console.log(`onInput: passphrase=${passphrase}, confirmPassphrase=${confirmPassphrase}`)
+        if (passphrase === confirmPassphrase) {
+            alert.setError(null);
         }
     }
 
+
     async function save() {
-        if (passphrase === '' || passphrase !== confirmPassphrase) {
-            alert.shake();
+        if (passphrase !== confirmPassphrase) {
+            return;
+        }
+
+        if (passphrase === '') {
+            alert.setError('Passphrase is empty.')
             return;
         }
 
         saving = true;
         try {
-            await invoke('set_passphrase', {passphrase});
-            $appState.sessionStatus = 'unlocked';
-            dispatch('save');
+            await alert.run(async () => {
+                await invoke('set_passphrase', {passphrase})
+                throw('something bad happened');
+                $appState.sessionStatus = 'unlocked';
+                dispatch('save');
+            });
         }
-        catch (e) {
-            if (error) alert.shake();
-            error = e;
+        finally {
+            saving = false;
         }
-        saving = false;
     }
 </script>
 
 
 <form class="form-control gap-y-4" on:submit|preventDefault={save}>
-    {#if error}
-        <ErrorAlert bind:this={alert}>{error}</ErrorAlert>
-    {/if}
+    <ErrorAlert bind:this={alert} />
 
     <label class="form-control w-full">
         <div class="label">
             <span class="label-text">Passphrase</span>
         </div>
-        <PassphraseInput bind:value={passphrase} placeholder="correct horse battery staple" />
+        <PassphraseInput
+            bind:value={passphrase}
+            on:input={onInput}
+            placeholder="correct horse battery staple"
+        />
     </label>
 
     <label class="form-control w-full">
@@ -64,8 +84,8 @@
         </div>
         <PassphraseInput
             bind:value={confirmPassphrase}
+            on:input={onInput} on:change={onChange}
             placeholder="correct horse battery staple"
-            on:change={confirm}
         />
     </label>
 
@@ -78,7 +98,7 @@
     </button>
 
     {#if cancellable}
-        <Link target="Home" hotkey="Escape">
+        <Link target="Settings" hotkey="Escape">
             <button type="button" class="btn btn-outline btn-sm w-full">Cancel</button>
         </Link>
     {/if}