sixside/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

Add StringMultiInput for OTPs

Browse Source
This commit is contained in:
Jon Staab
2026-03-06 14:58:25 -08:00
parent d015018a16
commit 2446d5cdb8
4 changed files with 89 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/KeyRecoveryConfirm.svelte
+4 -19
View File
@@ -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>
src/app/components/LogInOTPConfirm.svelte
+4 -19
View File
@@ -13,8 +13,8 @@
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 LogInSelect from "@app/components/LogInSelect.svelte"
import {POMADE_SIGNERS} from "@app/core/state"
import {pushToast} from "@app/util/toast"
import {setChecked} from "@app/util/notifications"
import {pushModal, clearModals} from "@app/util/modal"
@@ -30,18 +30,6 @@
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 < 3) {
return pushToast({
theme: "error",
message: "Not enough valid recovery codes were provided.",
})
}
loading = true
try {
@@ -85,7 +73,7 @@
}
}
let input = $state("")
let otps = $state<string[]>([])
let loading = $state(false)
</script>
@@ -100,17 +88,14 @@
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>
<StringMultiInput bind:value={otps} placeholder="Enter your login codes..." />
</ModalBody>
<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}>
<Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 3}>
<Spinner {loading}>Log In</Spinner>
<Icon icon={AltArrowRight} />
</Button>
src/app/components/PasswordReset.svelte
+4 -20
View File
@@ -14,8 +14,8 @@
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 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"
@@ -29,19 +29,6 @@
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 validate email ownership, not enough valid recovery codes were provided.",
})
}
const request = await Client.recoverWithChallenge(email, peersByPrefix, otps)
if (!request.ok) {
@@ -90,7 +77,7 @@
const back = () => history.back()
let loading = $state(false)
let input = $state("")
let otps = $state<string[]>([])
</script>
<Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -104,17 +91,14 @@
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>
<StringMultiInput bind:value={otps} placeholder="Enter your confirmation 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}>Continue</Spinner>
<Icon icon={AltArrowRight} />
</Button>