rework routing

src/views/EnterCredentials.svelte

@@ -1,12 +1,15 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
+    import { onMount } from 'svelte';
     import { invoke } from '@tauri-apps/api/tauri';
     import { getRootCause } from '../lib/errors.js';
 
+    import { navigate } from '../lib/routing.js';
+    import ErrorAlert from '../ui/ErrorAlert.svelte';
+
     export let appState;
 
-    const dispatch = createEventDispatcher();
     let errorMsg = null;
+    let alert;
     let AccessKeyId, SecretAccessKey, passphrase
 
     async function save() {
@@ -16,14 +19,13 @@
         try {
             await invoke('save_credentials', {credentials, passphrase});
             if (appState.currentRequest) {
-                dispatch('navigate', {target: 'ShowApproved'})
+                navigate('ShowApproved');
             }
             else {
-                dispatch('navigate', {target: 'Home'})
+                navigate('Home');
             }
         }
         catch (e) {
-            window.error = e;
             if (e.code === "GetSession") {
                 let root = getRootCause(e);
                 errorMsg = `Error response from AWS (${root.code}): ${root.msg}`;
@@ -31,18 +33,17 @@
             else {
                 errorMsg = e.msg;
             }
+
+            if (alert) {
+                alert.shake();
+            }
         }
     }
 </script>
 
 
 {#if errorMsg}
-<div class="alert alert-error shadow-lg">
-  <div>
-    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-    <span>{errorMsg}</span>
-  </div>
-</div>
+    <ErrorAlert>{errorMsg}</ErrorAlert>
 {/if}
 
 <form action="#" on:submit|preventDefault="{save}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">