almost finish refactoring PersistentCredential trait

src/ui/PassphraseInput.svelte

@@ -0,0 +1,44 @@
+<script>
+    import Icon from './Icon.svelte';
+
+    export let value = '';
+    export let placeholder = '';
+    export let autofocus = false;
+
+    let show = false;
+</script>
+
+
+<style>
+    button {
+        border: 1px solid oklch(var(--bc) / 0.2);
+        border-left: none;
+    }
+</style>
+
+
+<div class="join w-full">
+    <input
+        type={show ? 'text' : 'password'}
+        {value} {placeholder} {autofocus}
+        on:input on:change on:focus on:blur
+        class="input input-bordered flex-grow join-item placeholder:text-gray-500"
+        on:input={e => value = e.target.value}
+    />
+
+    <button
+        type="button"
+        class="btn btn-ghost join-item swap swap-rotate"
+        class:swap-active={show}
+        on:click={() => show = !show}
+    >
+        <Icon
+            name="eye"
+            class="w-5 h-5 swap-off"
+        />
+        <Icon
+            name="eye-slash"
+            class="w-5 h-5 swap-on"
+        />
+    </button>
+</div>