sixside/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests 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()
},
},