From ae523c1ca6b2906c254dc9baec01201ca46251a7 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Fri, 6 Mar 2026 11:48:23 -0800
Subject: [PATCH] Refactor pomade, add password reset flow

---
 src/app/components/LogInEmail.svelte          |   7 +-
 src/app/components/LogInOTPConfirm.svelte     |  13 +-
 src/app/components/LogInSelect.svelte         |  17 +--
 src/app/components/PasswordReset.svelte       | 121 ++++++++++++++++++
 .../components/PasswordResetConfirm.svelte    | 118 +++++++++++++++++
 src/app/components/PomadeSessions.svelte      |   6 +-
 src/app/components/SignUp.svelte              |  19 +--
 src/app/core/commands.ts                      |  58 ---------
 src/app/util/logout.ts                        |  15 +--
 src/app/util/pomade.ts                        |  78 +++++++++++
 src/routes/settings/profile/+page.svelte      |  54 +++++---
 11 files changed, 385 insertions(+), 121 deletions(-)
 create mode 100644 src/app/components/PasswordReset.svelte
 create mode 100644 src/app/components/PasswordResetConfirm.svelte
 create mode 100644 src/app/util/pomade.ts

diff --git a/src/app/components/LogInEmail.svelte b/src/app/components/LogInEmail.svelte
index 0c647a9f..a55e261b 100644
--- a/src/app/components/LogInEmail.svelte
+++ b/src/app/components/LogInEmail.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import {uniq} from "@welshman/lib"
   import {Client} from "@pomade/core"
-  import {loginWithPomade} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -19,10 +18,10 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTP from "@app/components/LogInOTP.svelte"
   import LogInSelect from "@app/components/LogInSelect.svelte"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
   import {pushModal, clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
-  import {deleteOldPomadeSessions} from "@app/core/commands"
 
   interface Props {
     email?: string
@@ -56,8 +55,8 @@
         const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
 
         if (res.ok && clientOptions) {
-          loginWithPomade(clientOptions.group.group_pk.slice(2), email, clientOptions)
-          deleteOldPomadeSessions()
+          loginWithPomade(clientOptions, email)
+          deleteDeactivatedPomadeSessions()
           setChecked("*")
           clearModals()
         } else {
diff --git a/src/app/components/LogInOTPConfirm.svelte b/src/app/components/LogInOTPConfirm.svelte
index e00b68c8..ad031926 100644
--- a/src/app/components/LogInOTPConfirm.svelte
+++ b/src/app/components/LogInOTPConfirm.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import {uniq} from "@welshman/lib"
   import {Client} from "@pomade/core"
-  import {loginWithPomade} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -15,11 +14,11 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInSelect from "@app/components/LogInSelect.svelte"
-  import {pushModal, clearModals} from "@app/util/modal"
-  import {setChecked} from "@app/util/notifications"
-  import {pushToast} from "@app/util/toast"
   import {POMADE_SIGNERS} from "@app/core/state"
-  import {deleteOldPomadeSessions} from "@app/core/commands"
+  import {pushToast} from "@app/util/toast"
+  import {setChecked} from "@app/util/notifications"
+  import {pushModal, clearModals} from "@app/util/modal"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
 
   type Props = {
     email: string
@@ -68,8 +67,8 @@
         const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
 
         if (res.ok && clientOptions) {
-          loginWithPomade(clientOptions.group.group_pk.slice(2), email, clientOptions)
-          deleteOldPomadeSessions()
+          loginWithPomade(clientOptions, email)
+          deleteDeactivatedPomadeSessions()
           setChecked("*")
           clearModals()
         } else {
diff --git a/src/app/components/LogInSelect.svelte b/src/app/components/LogInSelect.svelte
index 16b4f3fb..9da7c432 100644
--- a/src/app/components/LogInSelect.svelte
+++ b/src/app/components/LogInSelect.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {AccountOption} from "@pomade/core"
   import {Client} from "@pomade/core"
-  import {loginWithPomade} from "@welshman/app"
+  import {uniqBy} from "@welshman/lib"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
@@ -13,10 +13,10 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
-  import {clearModals} from "@app/util/modal"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
   import {setChecked} from "@app/util/notifications"
+  import {clearModals} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
-  import {deleteOldPomadeSessions} from "@app/core/commands"
 
   interface Props {
     email: string
@@ -24,7 +24,7 @@
     clientSecret: string
   }
 
-  let {email, options, clientSecret}: Props = $props()
+  const {email, options, clientSecret}: Props = $props()
 
   let loading = $state(false)
 
@@ -37,8 +37,8 @@
       const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
 
       if (res.ok && clientOptions) {
-        loginWithPomade(clientOptions.group.group_pk.slice(2), clientOptions.email, clientOptions)
-        deleteOldPomadeSessions()
+        loginWithPomade(clientOptions, email)
+        deleteDeactivatedPomadeSessions()
         setChecked("*")
         clearModals()
       } else {
@@ -59,10 +59,11 @@
   <ModalBody>
     <ModalHeader>
       <ModalTitle>Select Account</ModalTitle>
-      <ModalSubtitle>Multiple accounts are associated with {email}. Please select one to continue.</ModalSubtitle>
+      <ModalSubtitle
+        >Multiple accounts are associated with {email}. Please select one to continue.</ModalSubtitle>
     </ModalHeader>
     <div class="flex flex-col gap-2">
-      {#each options as option (option.pubkey)}
+      {#each uniqBy(o => o.pubkey, options) as option (option.pubkey)}
         <Button
           onclick={() => selectAccount(option)}
           disabled={loading}
diff --git a/src/app/components/PasswordReset.svelte b/src/app/components/PasswordReset.svelte
new file mode 100644
index 00000000..26cc639a
--- /dev/null
+++ b/src/app/components/PasswordReset.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+  import {Client} from "@pomade/core"
+  import type {SessionPomade} from "@welshman/app"
+  import {session} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
+  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"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import PasswordResetConfirm from "@app/components/PasswordResetConfirm.svelte"
+  import {POMADE_SIGNERS} from "@app/core/state"
+  import {pushToast} from "@app/util/toast"
+  import {pushModal} from "@app/util/modal"
+  import {getPomadeClient} from "@app/util/pomade"
+
+  type Props = {
+    peersByPrefix: Map<string, string>
+  }
+
+  const {peersByPrefix}: Props = $props()
+
+  const {email} = $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 confirm your email, not enough valid recovery codes were provided.",
+      })
+    }
+
+    const request = await Client.recoverWithChallenge(email, peersByPrefix, otps)
+
+    if (!request.ok) {
+      console.log(request.messages)
+
+      return pushToast({
+        theme: "error",
+        message: `Failed to confirm your email: ${request.messages[0]?.res?.message.toLowerCase()}`,
+      })
+    }
+
+    const client = await getPomadeClient()
+
+    if (!client) {
+      throw new Error("Unable to get client during password reset flow")
+    }
+
+    const result = await Client.selectRecovery(
+      request.clientSecret,
+      await client.getPubkey(),
+      client.peers,
+    )
+
+    if (!result.ok) {
+      console.log(result.messages)
+
+      return pushToast({
+        theme: "error",
+        message: `Failed to confirm your email: ${result.messages[0]?.res?.message.toLowerCase()}`,
+      })
+    }
+
+    pushModal(PasswordResetConfirm, {userSecret: result.userSecret})
+  }
+
+  const submit = async () => {
+    loading = true
+
+    try {
+      await confirmRecovery()
+    } finally {
+      loading = false
+    }
+  }
+
+  const back = () => history.back()
+
+  let loading = $state(false)
+  let input = $state("")
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Update your Password</ModalTitle>
+      <ModalSubtitle>Confirm your Email</ModalSubtitle>
+    </ModalHeader>
+    <p>Let's start by confirming your email.</p>
+    <p>
+      For security reasons, you may receive three or more emails with confirmation codes in them.
+      Please paste <strong>all</strong> confirmation 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>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Continue</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>
diff --git a/src/app/components/PasswordResetConfirm.svelte b/src/app/components/PasswordResetConfirm.svelte
new file mode 100644
index 00000000..076144d1
--- /dev/null
+++ b/src/app/components/PasswordResetConfirm.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+  import {Client} from "@pomade/core"
+  import {session} from "@welshman/app"
+  import type {SessionPomade} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
+  import Key from "@assets/icons/key.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"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {loginWithPomade, deleteCurrentPomadeSession} from "@app/util/pomade"
+  import {clearModals} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+
+  type Props = {
+    userSecret: string
+  }
+
+  const {userSecret}: Props = $props()
+
+  const {email} = $session as SessionPomade
+
+  const back = () => history.back()
+
+  const onSubmit = async () => {
+    if (password.trim().length < 12) {
+      return pushToast({
+        theme: "error",
+        message: "Password must be at least 12 characters long.",
+      })
+    }
+
+    loading = true
+
+    try {
+      pushToast({
+        timeout: 60_000,
+        message: "Registering your new password, please wait...",
+      })
+
+      const {clientOptions, ...registerRes} = await Client.register(2, 3, userSecret)
+
+      if (!registerRes.ok) {
+        return pushToast({
+          theme: "error",
+          message: "Failed to register your new password! Please try again.",
+        })
+      }
+
+      const setupRes = await new Client(clientOptions).setupRecovery(email, password)
+
+      if (!setupRes.ok) {
+        const message = setupRes.messages[0]?.res?.message || "Please try again."
+
+        return pushToast({
+          theme: "error",
+          message: `Failed to register your new password! ${message}.`,
+        })
+      }
+
+      await deleteCurrentPomadeSession()
+
+      pushToast({message: "Your password has been updated!"})
+      loginWithPomade(clientOptions, email)
+      clearModals()
+    } catch (e) {
+      console.error(e)
+
+      pushToast({
+        theme: "error",
+        message: "Failed to register your new password! Please try again.",
+      })
+    } finally {
+      loading = false
+    }
+  }
+
+  let password = $state("")
+  let loading = $state(false)
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(onSubmit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Update your Password</ModalTitle>
+      <ModalSubtitle>Please provide your new password.</ModalSubtitle>
+    </ModalHeader>
+    <FieldInline>
+      {#snippet label()}
+        <p>New Password*</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <Icon icon={Key} />
+          <input type="password" bind:value={password} />
+        </label>
+      {/snippet}
+    </FieldInline>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit" disabled={loading || !password}>
+      <Spinner {loading}>Continue</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>
diff --git a/src/app/components/PomadeSessions.svelte b/src/app/components/PomadeSessions.svelte
index e710c2a2..50edee52 100644
--- a/src/app/components/PomadeSessions.svelte
+++ b/src/app/components/PomadeSessions.svelte
@@ -9,8 +9,8 @@
   import Popover from "@lib/components/Popover.svelte"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import {pushToast} from "@app/util/toast"
-  import {loadOtherPomadeSessions} from "@app/core/commands"
-  import type {PomadeSessionWithPeers} from "@app/core/commands"
+  import {loadOtherPomadeSessions} from "@app/util/pomade"
+  import type {PomadeSessionWithPeers} from "@app/util/pomade"
 
   const toggleMenu = (client: string) => {
     menuClient = menuClient === client ? "" : client
@@ -63,7 +63,7 @@
 
   onMount(() => {
     loadOtherPomadeSessions().then(_sessions => {
-      sessions = _sessions
+      sessions = _sessions || []
     })
   })
 </script>
diff --git a/src/app/components/SignUp.svelte b/src/app/components/SignUp.svelte
index df8accc4..f6a395b4 100644
--- a/src/app/components/SignUp.svelte
+++ b/src/app/components/SignUp.svelte
@@ -1,15 +1,8 @@
 <script lang="ts">
   import type {ClientOptions} from "@pomade/core"
   import type {Profile} from "@welshman/util"
-  import {
-    makeProfile,
-    makeSecret,
-    getPubkey,
-    RELAYS,
-    MESSAGING_RELAYS,
-    makeEvent,
-  } from "@welshman/util"
-  import {loginWithNip01, loginWithPomade, publishThunk} from "@welshman/app"
+  import {makeProfile, makeSecret, RELAYS, MESSAGING_RELAYS, makeEvent} from "@welshman/util"
+  import {loginWithNip01, publishThunk} from "@welshman/app"
   import Key from "@assets/icons/key-minimalistic.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import {getKey, setKey} from "@lib/implicit"
@@ -23,8 +16,6 @@
   import SignUpEmail from "@app/components/SignUpEmail.svelte"
   import SignUpProfile from "@app/components/SignUpProfile.svelte"
   import SignUpComplete from "@app/components/SignUpComplete.svelte"
-  import {setChecked} from "@app/util/notifications"
-  import {pushModal, clearModals} from "@app/util/modal"
   import {initProfile} from "@app/core/commands"
   import {
     POMADE_SIGNERS,
@@ -33,6 +24,9 @@
     DEFAULT_RELAYS,
     DEFAULT_MESSAGING_RELAYS,
   } from "@app/core/state"
+  import {setChecked} from "@app/util/notifications"
+  import {loginWithPomade} from "@app/util/pomade"
+  import {pushModal, clearModals} from "@app/util/modal"
 
   setKey("signup.email", "")
   setKey("signup.secret", makeSecret())
@@ -73,10 +67,9 @@
       complete: () => pushModal(SignUpComplete, {next: flows.email.finalize}),
       finalize: () => {
         const email = getKey<string>("signup.email")!
-        const secret = getKey<string>("signup.secret")!
         const clientOptions = getKey<ClientOptions>("signup.clientOptions")!
 
-        loginWithPomade(getPubkey(secret), email, clientOptions)
+        loginWithPomade(clientOptions, email)
         completeSignup()
       },
     },
diff --git a/src/app/core/commands.ts b/src/app/core/commands.ts
index 5e749d9b..2ea604a8 100644
--- a/src/app/core/commands.ts
+++ b/src/app/core/commands.ts
@@ -1,8 +1,6 @@
 import {nwc} from "@getalby/sdk"
 import * as nip19 from "nostr-tools/nip19"
 import {get, derived} from "svelte/store"
-import {Client} from "@pomade/core"
-import type {SessionItem} from "@pomade/core"
 import {
   first,
   sha256,
@@ -73,7 +71,6 @@ import {
   waitForThunkError,
   getPubkeyRelays,
   userBlossomServerList,
-  isPomadeSession,
   getThunkError,
 } from "@welshman/app"
 import {compressFile} from "@lib/html"
@@ -702,58 +699,3 @@ export const updateProfile = async ({
 
   await publishThunk({event, relays}).complete
 }
-
-// Pomade
-
-export type PomadeSessionWithPeers = SessionItem & {peers: string[]}
-
-export const loadOtherPomadeSessions = async () => {
-  const $session = get(session)
-
-  if (isPomadeSession($session)) {
-    const client = new Client($session.clientOptions)
-    const result = await client.listSessions()
-    const pubkey = await client.getPubkey()
-
-    if (result.ok) {
-      // Group sessions by client pubkey and collect peers
-      const sessionMap = new Map<string, PomadeSessionWithPeers>()
-
-      for (const message of result.messages) {
-        if (!message.res?.items) continue
-
-        for (const item of message.res.items) {
-          if (item.client === pubkey) {
-            continue
-          }
-
-          const existing = sessionMap.get(item.client)
-
-          if (existing) {
-            existing.peers.push(message.url)
-          } else {
-            sessionMap.set(item.client, {...item, peers: [message.url]})
-          }
-        }
-      }
-
-      return Array.from(sessionMap.values())
-    }
-  }
-
-  return []
-}
-
-export const deleteOldPomadeSessions = async () => {
-  const $session = get(session)
-
-  if (isPomadeSession($session)) {
-    const client = new Client($session.clientOptions)
-
-    for (const item of await loadOtherPomadeSessions()) {
-      if (item.deactivated_at) {
-        await client.deleteSession(item.client, item.peers)
-      }
-    }
-  }
-}
diff --git a/src/app/util/logout.ts b/src/app/util/logout.ts
index b3b25fe6..23a3f9ac 100644
--- a/src/app/util/logout.ts
+++ b/src/app/util/logout.ts
@@ -1,20 +1,9 @@
-import {get} from "svelte/store"
-import {Client} from "@pomade/core"
-import {getPubkey} from "@welshman/util"
-import {session, isPomadeSession} from "@welshman/app"
 import {kv, db} from "@app/core/storage"
 import {Push} from "@app/util/notifications"
+import {deactivateCurrentPomadeSession} from "@app/util/pomade"
 
 export const logout = async () => {
-  const $session = get(session)
-
-  if ($session && isPomadeSession($session)) {
-    await new Client($session.clientOptions).deactivateSession(
-      getPubkey($session.clientOptions.secret),
-      $session.clientOptions.peers,
-    )
-  }
-
+  await deactivateCurrentPomadeSession()
   await Push.disable()
   await kv.clear()
   await db.clear()
diff --git a/src/app/util/pomade.ts b/src/app/util/pomade.ts
new file mode 100644
index 00000000..fb4d8a00
--- /dev/null
+++ b/src/app/util/pomade.ts
@@ -0,0 +1,78 @@
+import {get} from "svelte/store"
+import {Client, type SessionItem, type ClientOptions} from "@pomade/core"
+import {ifLet, reject, spec} from "@welshman/lib"
+import {session, isPomadeSession, loginWithPomade as _loginWithPomade} from "@welshman/app"
+
+export const getPomadeClient = async () => {
+  const $session = get(session)
+
+  if (isPomadeSession($session)) {
+    return new Client($session.clientOptions)
+  }
+}
+
+export type PomadeSessionWithPeers = SessionItem & {peers: string[]}
+
+export const loadPomadeSessions = async () => {
+  const sessionMap = new Map<string, PomadeSessionWithPeers>()
+  const client = await getPomadeClient()
+
+  if (client) {
+    const result = await client.listSessions()
+
+    for (const message of result.messages) {
+      if (!message.res?.items) continue
+
+      for (const item of message.res.items) {
+        const existing = sessionMap.get(item.client)
+
+        if (existing) {
+          existing.peers.push(message.url)
+        } else {
+          sessionMap.set(item.client, {...item, peers: [message.url]})
+        }
+      }
+    }
+  }
+
+  return Array.from(sessionMap.values())
+}
+
+export const loadOtherPomadeSessions = async () => {
+  const client = await getPomadeClient()
+
+  if (!client) {
+    return []
+  }
+
+  return reject(spec({client: await client.getPubkey()}), await loadPomadeSessions())
+}
+
+export const deletePomadeSession = async (clientPubkey: string, peers: string[]) =>
+  ifLet(await getPomadeClient(), client => client.deleteSession(clientPubkey, peers))
+
+export const deactivatePomadeSession = async (clientPubkey: string, peers: string[]) =>
+  ifLet(await getPomadeClient(), client => client.deactivateSession(clientPubkey, peers))
+
+export const deleteCurrentPomadeSession = async () =>
+  ifLet(await getPomadeClient(), async client =>
+    client.deleteSession(await client.getPubkey(), client.peers),
+  )
+
+export const deactivateCurrentPomadeSession = async () =>
+  ifLet(await getPomadeClient(), async client =>
+    client.deactivateSession(await client.getPubkey(), client.peers),
+  )
+
+export const deleteDeactivatedPomadeSessions = async () => {
+  const sessions = await loadOtherPomadeSessions()
+
+  for (const item of sessions || []) {
+    if (item.deactivated_at) {
+      await deletePomadeSession(item.client, item.peers)
+    }
+  }
+}
+
+export const loginWithPomade = (clientOptions: ClientOptions, email: string) =>
+  _loginWithPomade(clientOptions.group.group_pk.slice(2), email, clientOptions)
diff --git a/src/routes/settings/profile/+page.svelte b/src/routes/settings/profile/+page.svelte
index 3bee1b08..8b01f2d1 100644
--- a/src/routes/settings/profile/+page.svelte
+++ b/src/routes/settings/profile/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
   import * as nip19 from "nostr-tools/nip19"
+  import {Client} from "@pomade/core"
   import {hexToBytes} from "@welshman/lib"
   import {displayPubkey, displayProfile} from "@welshman/util"
-  import {pubkey, session, displayNip05, deriveProfile} from "@welshman/app"
+  import {pubkey, session, SessionMethod, displayNip05, deriveProfile} from "@welshman/app"
   import {slideAndFade} from "@lib/transition"
   import PenNewSquare from "@assets/icons/pen-new-square.svg?dataurl"
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import Letter from "@assets/icons/letter.svg?dataurl"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
@@ -16,15 +18,16 @@
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
   import ProfileEdit from "@app/components/ProfileEdit.svelte"
   import ProfileDelete from "@app/components/ProfileDelete.svelte"
   import SignerStatus from "@app/components/SignerStatus.svelte"
+  import PasswordReset from "@app/components/PasswordReset.svelte"
   import InfoKeys from "@app/components/InfoKeys.svelte"
-  import {PLATFORM_NAME} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
-  import {clip} from "@app/util/toast"
+  import {clip, pushToast} from "@app/util/toast"
 
   const npub = nip19.npubEncode($pubkey!)
   const profile = deriveProfile($pubkey!)
@@ -38,9 +41,29 @@
 
   const startDelete = () => pushModal(ProfileDelete)
 
+  const startPasswordReset = async () => {
+    loading = true
+
+    try {
+      const {ok, peersByPrefix} = await Client.requestChallenge($session!.email)
+
+      if (!ok) {
+        pushToast({
+          theme: "error",
+          message: "Failed to initiate password reset!",
+        })
+      }
+
+      pushModal(PasswordReset, {peersByPrefix})
+    } finally {
+      loading = false
+    }
+  }
+
   const startRecovery = () => pushModal(InfoKeys)
 
-  let showAdvanced = false
+  let loading = $state(false)
+  let showAdvanced = $state(false)
 </script>
 
 <div class="content column gap-4">
@@ -69,10 +92,11 @@
       <ContentMinimal event={{content: $profile?.about || "", tags: []}} />
     {/key}
   </div>
-  {#if $session?.email}
-    <div class="card2 bg-alt col-4 shadow-md">
+  <div class="card2 bg-alt col-4 shadow-md">
+    {#if $session?.method === SessionMethod.Pomade}
       <FieldInline>
         {#snippet label()}
+          <Icon icon={Letter} />
           <p>Email Address</p>
         {/snippet}
         {#snippet input()}
@@ -81,16 +105,8 @@
             <input readonly value={$session.email} class="grow" />
           </label>
         {/snippet}
-        {#snippet info()}
-          <p>
-            Your email and password can only be used to log into {PLATFORM_NAME}.
-            <Button class="link" onclick={startRecovery}>Start holding your own keys</Button>
-          </p>
-        {/snippet}
       </FieldInline>
-    </div>
-  {/if}
-  <div class="card2 bg-alt col-4 shadow-md">
+    {/if}
     <FieldInline>
       {#snippet label()}
         <p class="flex items-center gap-3">
@@ -139,6 +155,14 @@
       </FieldInline>
     {/if}
     <SignerStatus />
+    {#if $session?.method === SessionMethod.Pomade}
+      <div class="flex gap-2 justify-end">
+        <Button class="btn" onclick={startPasswordReset}>
+          <Spinner {loading}>Update your password</Spinner>
+        </Button>
+        <Button class="btn btn-primary" onclick={startRecovery}>Start holding your own keys</Button>
+      </div>
+    {/if}
   </div>
   <div class="card2 bg-alt shadow-md">
     <div class="flex items-center justify-between">