almost finish refactoring PersistentCredential trait

src/views/passphrase/EnterPassphrase.svelte

@@ -0,0 +1,84 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { invoke } from '@tauri-apps/api/core';
+    import { appState } from '../../lib/state.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';
+
+    export let cancellable = false;
+
+
+    const dispatch = createEventDispatcher();
+
+    let alert, saving;
+    let passphrase = '';
+    let confirmPassphrase = '';
+    let error = null;
+
+    function confirm() {
+        if (passphrase !== confirmPassphrase) {
+            error = 'Passphrases do not match.';
+        }
+    }
+
+    async function save() {
+        if (passphrase === '' || passphrase !== confirmPassphrase) {
+            alert.shake();
+            return;
+        }
+
+        saving = true;
+        try {
+            await invoke('set_passphrase', {passphrase});
+            $appState.sessionStatus = 'unlocked';
+            dispatch('save');
+        }
+        catch (e) {
+            if (error) alert.shake();
+            error = e;
+        }
+        saving = false;
+    }
+</script>
+
+
+<form class="form-control gap-y-4" on:submit|preventDefault={save}>
+    {#if error}
+        <ErrorAlert bind:this={alert}>{error}</ErrorAlert>
+    {/if}
+
+    <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" />
+    </label>
+
+    <label class="form-control w-full">
+        <div class="label">
+            <span class="label-text">Re-enter passphrase</span>
+        </div>
+        <PassphraseInput
+            bind:value={confirmPassphrase}
+            placeholder="correct horse battery staple"
+            on:change={confirm}
+        />
+    </label>
+
+    <button type="submit" class="btn btn-primary">
+        {#if saving}
+            <Spinner class="w-5 h-5" thickness="12"/>
+        {:else}
+            Submit
+        {/if}
+    </button>
+
+    {#if cancellable}
+        <Link target="Home" hotkey="Escape">
+            <button type="button" class="btn btn-outline btn-sm w-full">Cancel</button>
+        </Link>
+    {/if}
+</form>