Add StringMultiInput for OTPs

src/app/components/KeyRecoveryConfirm.svelte

@@ -15,10 +15,10 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import StringMultiInput from "@lib/components/StringMultiInput.svelte"
   import KeyDownload from "@app/components/KeyDownload.svelte"
   import {pushToast} from "@app/util/toast"
   import {pushModal, clearModals} from "@app/util/modal"
-  import {POMADE_SIGNERS} from "@app/core/state"
 
   type Props = {
     peersByPrefix: Map<string, string>
@@ -32,18 +32,6 @@
   } = $session as SessionPomade
 
   const confirmRecovery = async () => {
-    const otps = input
-      .split(/\n/)
-      .map(x => x.trim())
-      .filter(x => x.match(/^[0-9]{8}$/))
-
-    if (otps.length < 2) {
-      return pushToast({
-        theme: "error",
-        message: "Failed to recover, not enough valid recovery codes were provided.",
-      })
-    }
-
     const request = await Client.recoverWithChallenge(email, peersByPrefix, otps)
 
     if (!request.ok) {
@@ -82,7 +70,7 @@
   const back = () => history.back()
 
   let loading = $state(false)
-  let input = $state("")
+  let otps = $state<string[]>([])
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -96,17 +84,14 @@
       For security reasons, you may receive three or more emails with recovery codes in them. Please
       paste <strong>all</strong> recovery codes into the text box below, on separate lines.
     </p>
-    <textarea
-      rows={POMADE_SIGNERS.length + 1}
-      class="textarea textarea-bordered leading-4"
-      bind:value={input}></textarea>
+    <StringMultiInput bind:value={otps} placeholder="Enter your recovery codes..." />
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 2}>
       <Spinner {loading}>Confirm recovery</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>