start refactoring for default credentials

src/views/Unlock.svelte

@@ -1,39 +1,32 @@
 <script>
     import { invoke } from '@tauri-apps/api/core';
     import { emit } from '@tauri-apps/api/event';
-    import { onMount } from 'svelte';
+    import { onMount, createEventDispatcher } from 'svelte';
 
     import { appState } from '../lib/state.js';
     import { navigate } from '../lib/routing.js';
     import { getRootCause } from '../lib/errors.js';
+
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import Link from '../ui/Link.svelte';
+    import PassphraseInput from '../ui/PassphraseInput.svelte';
     import Spinner from '../ui/Spinner.svelte';
+    import vaultDoorSvg from '../assets/vault_door.svg?raw';
 
 
+    const dispatch = createEventDispatcher();
+
     let errorMsg = null;
     let alert;
     let passphrase = '';
-    let loadTime = 0;
     let saving = false;
     async function unlock() {
-        // The hotkey for navigating here from homepage is Enter, which also
-        // happens to trigger the form submit event
-        if (Date.now() - loadTime < 10) {
-            return;
-        }
-
         try {
             saving = true;
             let r = await invoke('unlock', {passphrase});
-            $appState.credentialStatus = 'unlocked';
-            emit('credentials-event', 'unlocked');
-            if ($appState.currentRequest) {
-                navigate('Approve');
-            }
-            else {
-                navigate('Home');
-            }
+            $appState.sessionStatus = 'unlocked';
+            emit('unlocked');
+            dispatch('unlocked');
         }
         catch (e) {
             const root = getRootCause(e);
@@ -52,34 +45,28 @@
             saving = false;
         }
     }
-
-    function cancel() {
-        emit('credentials-event', 'unlock-canceled');
-        if ($appState.currentRequest !== null) {
-            // dirty hack to prevent spurious error when returning to approve screen
-            delete $appState.currentRequest.response;
-            navigate('Approve');
-        }
-        else {
-            navigate('Home');
-        }
-    }
-
-    onMount(() => {
-        loadTime = Date.now();
-    })
 </script>
 
 
+<div class="fixed top-0 w-full p-2 text-center">
+    <h1 class="text-3xl font-bold">Creddy is locked</h1>
+</div>
+
 <form action="#" on:submit|preventDefault="{unlock}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">
-    <h2 class="font-bold text-2xl text-center">Enter your passphrase</h2>
+    <div class="mx-auto">
+        {@html vaultDoorSvg}
+    </div>
 
-    {#if errorMsg}
-        <ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
-    {/if}
+    <label class="space-y-4">
+        <h2 class="font-bold text-xl text-center">Please enter your passphrase</h2>
 
-    <!-- svelte-ignore a11y-autofocus -->
-    <input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />
+        {#if errorMsg}
+            <ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
+        {/if}
+
+        <!-- svelte-ignore a11y-autofocus -->
+        <PassphraseInput autofocus="true" bind:value={passphrase} placeholder="correct horse battery staple" />
+    </label>
 
     <button type="submit" class="btn btn-primary">
         {#if saving}
@@ -88,8 +75,4 @@
             Submit
         {/if}
     </button>
-
-    <Link target={cancel} hotkey="Escape">
-        <button class="btn btn-sm btn-outline w-full">Cancel</button>
-    </Link>
 </form>