Use simple OTPs

src/app/components/KeyRecoveryConfirm.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {Client, decodeChallenge} from "@pomade/core"
-  import {tryCatch} from "@welshman/lib"
+  import {Client} from "@pomade/core"
   import {getPubkey} from "@welshman/util"
   import type {SessionPomade} from "@welshman/app"
   import {session} from "@welshman/app"
@@ -17,25 +16,31 @@
   import {pushModal, clearModals} from "@app/util/modal"
   import {POMADE_SIGNERS} from "@app/core/state"
 
+  type Props = {
+    peersByPrefix: Map<string, string>
+  }
+
+  const {peersByPrefix}: Props = $props()
+
   const {
     email,
     clientOptions: {secret, peers},
   } = $session as SessionPomade
 
   const confirmRecovery = async () => {
-    const challenges = input
+    const otps = input
       .split(/\n/)
       .map(x => x.trim())
-      .filter(x => tryCatch(() => decodeChallenge(x)))
+      .filter(x => x.match(/^[0-9]{8}$/))
 
-    if (challenges.length < 2) {
+    if (otps.length < 2) {
       return pushToast({
         theme: "error",
-        message: "Failed to recover, not enough valid challenges were provided.",
+        message: "Failed to recover, not enough valid recovery codes were provided.",
       })
     }
 
-    const request = await Client.recoverWithChallenge(email, challenges)
+    const request = await Client.recoverWithChallenge(email, peersByPrefix, otps)
 
     if (!request.ok) {
       console.log(request.messages)
@@ -88,12 +93,11 @@
   <p>Your recovery codes have been sent!</p>
   <p>
     For security reasons, you may receive three or more emails with recovery codes in them. Please
-    paste <i>all</i>
-    recovery codes into the text box below, on separate lines.
+    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 text-xs leading-4"
+    class="textarea textarea-bordered leading-4"
     bind:value={input}></textarea>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>

src/app/components/KeyRecoveryRequest.svelte

@@ -19,8 +19,9 @@
   } = $session as SessionPomade
 
   const requestRecovery = async () => {
-    await Client.requestChallenge(email, peers)
-    pushModal(KeyRecoveryConfirm)
+    const {peersByPrefix} = await Client.requestChallenge(email, peers)
+
+    pushModal(KeyRecoveryConfirm, {peersByPrefix})
   }
 
   const submit = async () => {

src/app/components/LogInOTP.svelte

@@ -26,10 +26,10 @@
     loading = true
 
     try {
-      const {ok} = await Client.requestChallenge(email)
+      const {ok, peersByPrefix} = await Client.requestChallenge(email)
 
       if (ok) {
-        pushModal(LogInOTPConfirm, {email})
+        pushModal(LogInOTPConfirm, {email, peersByPrefix})
       } else {
         pushToast({
           theme: "error",

src/app/components/LogInOTPConfirm.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import {Client} from "@pomade/core"
-  import {identity} from "@welshman/lib"
   import {loginWithPomade} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
-  import FieldInline from "@lib/components/FieldInline.svelte"
-  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -15,22 +12,37 @@
   import {clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
+  import {POMADE_SIGNERS} from "@app/core/state"
 
   type Props = {
     email: string
+    peersByPrefix: Map<string, string>
   }
 
-  const {email}: Props = $props()
+  const {email, peersByPrefix}: Props = $props()
 
   const back = () => history.back()
 
   const onSubmit = 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.",
+      })
+    }
+
     loading = true
 
     try {
       const {ok, options, messages, clientSecret} = await Client.loginWithChallenge(
         email,
-        challenges,
+        peersByPrefix,
+        otps,
       )
 
       if (!ok) {
@@ -63,8 +75,7 @@
     }
   }
 
-  const challenges = $state(["", "", ""])
-
+  let input = $state("")
   let loading = $state(false)
 </script>
 
@@ -74,52 +85,24 @@
       <div>Log In</div>
     {/snippet}
     {#snippet info()}
-      <div>Enter the one-time login code sent to your email</div>
+      <div>Enter the login codes sent to your email</div>
     {/snippet}
   </ModalHeader>
-  <FieldInline>
-    {#snippet label()}
-      <p>Login Code #1*</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon={Key} />
-        <input bind:value={challenges[0]} />
-      </label>
-    {/snippet}
-  </FieldInline>
-  <FieldInline>
-    {#snippet label()}
-      <p>Login Code #2*</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon={Key} />
-        <input bind:value={challenges[1]} />
-      </label>
-    {/snippet}
-  </FieldInline>
-  <FieldInline>
-    {#snippet label()}
-      <p>Login Code #3*</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon={Key} />
-        <input bind:value={challenges[2]} />
-      </label>
-    {/snippet}
-  </FieldInline>
-  <p class="text-sm">
-    To keep your key as safe a possible, you will receive <strong>three separate emails</strong>. Be
-    sure to enter all three codes!
+  <p>Your login codes have been sent!</p>
+  <p>
+    For security reasons, you may receive three or more emails with login codes in them. Please
+    paste <strong>all</strong> login 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>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading || !challenges.every(identity)}>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Log In</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/SignUpEmail.svelte

@@ -39,11 +39,9 @@
     let client: Client | undefined = undefined
 
     try {
-      const userSecret = makeSecret()
-      console.log(userSecret)
-      const {ok, clientOptions} = await Client.register(2, 3, userSecret)
+      const {clientOptions, ...registerRes} = await Client.register(2, 3, makeSecret())
 
-      if (!ok) {
+      if (!registerRes.ok) {
         return pushToast({
           theme: "error",
           message: "Failed to register! Please try again.",
@@ -68,7 +66,7 @@
       if (!challengeRes.ok) {
         return pushToast({
           theme: "error",
-          message: `Failed to request confirmation code! Please try again..`,
+          message: `Failed to request confirmation code! Please try again.`,
         })
       }