coracle/flotilla
1
6
Fork 24
Code Issues 35 Pull Requests 3 Actions Packages Projects 5 Releases Wiki Activity

Refactor pomade, add password reset flow

Browse Source
This commit is contained in:
Jon Staab
2026-03-06 11:48:23 -08:00
parent 7c86c1477f
commit ae523c1ca6
11 changed files with 385 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/LogInEmail.svelte
+3 -4
View File
@@ -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 {
src/app/components/LogInOTPConfirm.svelte
+6 -7
View File
@@ -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 {
src/app/components/LogInSelect.svelte
+9 -8
View File
@@ -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}
src/app/components/PasswordReset.svelte
+121
View File
@@ -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>
src/app/components/PasswordResetConfirm.svelte
+118
View File
@@ -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>
src/app/components/PomadeSessions.svelte
+3 -3
View File
@@ -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>
src/app/components/SignUp.svelte
+6 -13
View File
@@ -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()
},
},
src/app/core/commands.ts
-58
View File
@@ -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)
}
}
}
}
src/app/util/logout.ts
+2 -13
View File
@@ -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()
src/app/util/pomade.ts
+78
View File
@@ -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)
src/routes/settings/profile/+page.svelte
+39 -15
View File
@@ -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">