acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Use TokenField for password change and reset forms

Browse Source
This commit is contained in:
DS Boyce
2026-08-06 11:03:22 -07:00
parent 7750882fd0
commit 9fe53fad87
4 changed files with 59 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
oxlint-suppressions.json
-5
View File
@@ -965,11 +965,6 @@
"count": 1
}
},
"src/screens/Settings/components/ChangePasswordDialog.tsx": {
"typescript/no-explicit-any": {
"count": 2
}
},
"src/screens/Settings/components/CopyButton.tsx": {
"typescript/no-floating-promises": {
"count": 1
src/components/dialogs/EmailDialog/components/TokenField.tsx
+18 -1
View File
@@ -15,10 +15,23 @@ export function isValidCode(value?: string) {
}
export function TokenField({
testID,
autoFocus,
editable,
value,
onChangeText,
onFocus,
onSubmitEditing,
}: Pick<TextInputProps, 'value' | 'onChangeText' | 'onSubmitEditing'>) {
}: Pick<
TextInputProps,
| 'testID'
| 'autoFocus'
| 'editable'
| 'value'
| 'onChangeText'
| 'onFocus'
| 'onSubmitEditing'
>) {
const {t: l} = useLingui()
const isInvalid = Boolean(value && value.length > 10 && !isValidCode(value))
@@ -31,14 +44,18 @@ export function TokenField({
<TextField.Root>
<TextField.Icon icon={Shield} />
<TextField.Input
testID={testID}
autoComplete="off"
autoCorrect={false}
autoFocus={autoFocus}
editable={editable}
isInvalid={isInvalid}
label={l`Confirmation code`}
maxLength={11}
placeholder="XXXXX-XXXXX"
value={value}
onChangeText={handleOnChangeText}
onFocus={onFocus}
onSubmitEditing={onSubmitEditing}
/>
</TextField.Root>
src/screens/Login/SetNewPasswordForm.tsx
+9 -29
View File
@@ -9,9 +9,9 @@ import {logger} from '#/logger'
import {atoms as a, web} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {TokenField} from '#/components/dialogs/EmailDialog/components/TokenField'
import * as TextField from '#/components/forms/TextField'
import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
@@ -87,17 +87,6 @@ export const SetNewPasswordForm = ({
}
}
const onBlur = () => {
const formattedCode = checkAndFormatResetCode(resetCode)
if (!formattedCode) {
setError(
l`You have entered an invalid code. It should look like XXXXX-XXXXX.`,
)
return
}
setResetCode(formattedCode)
}
return (
<FormContainer
testID="setNewPasswordForm"
@@ -112,23 +101,14 @@ export const SetNewPasswordForm = ({
<TextField.LabelText>
<Trans>Reset code</Trans>
</TextField.LabelText>
<TextField.Root>
<TextField.Icon icon={Ticket} />
<TextField.Input
testID="resetCodeInput"
label={l`Looks like XXXXX-XXXXX`}
autoCapitalize="none"
autoFocus={true}
autoCorrect={false}
autoComplete="off"
value={resetCode}
onChangeText={setResetCode}
onFocus={() => setError('')}
onBlur={onBlur}
editable={!isProcessing}
accessibilityHint={l`Input code sent to your email for password reset`}
/>
</TextField.Root>
<TokenField
testID="resetCodeInput"
autoFocus={true}
editable={!isProcessing}
value={resetCode}
onChangeText={setResetCode}
onFocus={() => setError('')}
/>
</View>
<View>
<TextField.LabelText>
src/screens/Settings/components/ChangePasswordDialog.tsx
+32 -62
View File
@@ -1,8 +1,6 @@
import {useState} from 'react'
import {useWindowDimensions, View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import * as EmailValidator from 'email-validator'
import {cleanError, isNetworkError} from '#/lib/strings/errors'
@@ -14,6 +12,7 @@ import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
import {android, atoms as a, web} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {TokenField} from '#/components/dialogs/EmailDialog/components/TokenField'
import * as TextField from '#/components/forms/TextField'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
@@ -44,7 +43,7 @@ export function ChangePasswordDialog({
}
function Inner() {
const {_} = useLingui()
const {t: l} = useLingui()
const {currentAccount} = useSession()
const client = usePdsClient()
const control = Dialog.useDialogContext()
@@ -57,22 +56,16 @@ function Inner() {
const uiStrings = {
RequestCode: {
title: _(msg`Change your password`),
message: _(
msg`If you want to change your password, we will send you a code to verify that this is your account.`,
),
title: l`Change your password`,
message: l`If you want to change your password, we will send you a code to verify that this is your account.`,
},
ChangePassword: {
title: _(msg`Enter code`),
message: _(
msg`Please enter the code you received and the new password you would like to use.`,
),
title: l`Enter code`,
message: l`Please enter the code you received and the new password you would like to use.`,
},
Done: {
title: _(msg`Password changed`),
message: _(
msg`Your password has been changed successfully! Please use your new password when you sign in to Bluesky from now on.`,
),
title: l`Password changed`,
message: l`Your password has been changed successfully! Please use your new password when you sign in to Bluesky from now on.`,
},
}
@@ -81,7 +74,7 @@ function Inner() {
!currentAccount?.email ||
!EmailValidator.validate(currentAccount.email)
) {
return setError(_(msg`Your email appears to be invalid.`))
return setError(l`Your email appears to be invalid.`)
}
setError('')
@@ -91,12 +84,11 @@ function Inner() {
email: currentAccount.email,
})
setStage(Stages.ChangePassword)
} catch (e: any) {
} catch (error) {
const e = error as Error
if (isNetworkError(e)) {
setError(
_(
msg`Unable to contact your service. Please check your internet connection and try again.`,
),
l`Unable to contact your service. Please check your internet connection and try again.`,
)
} else {
logger.error('Failed to request password reset', {safeMessage: e})
@@ -111,20 +103,18 @@ function Inner() {
const formattedCode = checkAndFormatResetCode(resetCode)
if (!formattedCode) {
setError(
_(
msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`,
),
l`You have entered an invalid code. It should look like XXXXX-XXXXX.`,
)
return
}
if (!newPassword) {
setError(
_(msg`Please enter a password. It must be at least 8 characters long.`),
l`Please enter a password. It must be at least 8 characters long.`,
)
return
}
if (newPassword.length < 8) {
setError(_(msg`Password must be at least 8 characters long.`))
setError(l`Password must be at least 8 characters long.`)
return
}
@@ -136,17 +126,16 @@ function Inner() {
password: newPassword,
})
setStage(Stages.Done)
} catch (e: any) {
} catch (error) {
const e = error as Error
if (isNetworkError(e)) {
setError(
_(
msg`Unable to contact your service. Please check your internet connection and try again.`,
),
l`Unable to contact your service. Please check your internet connection and try again.`,
)
} else if (
matchXrpcError(e, com.atproto.server.resetPassword) === 'InvalidToken'
) {
setError(_(msg`This confirmation code is not valid. Please try again.`))
setError(l`This confirmation code is not valid. Please try again.`)
} else {
logger.error('Failed to set new password', {safeMessage: e})
setError(cleanError(e))
@@ -156,17 +145,9 @@ function Inner() {
}
}
const onBlur = () => {
const formattedCode = checkAndFormatResetCode(resetCode)
if (!formattedCode) {
return
}
setResetCode(formattedCode)
}
return (
<Dialog.ScrollableInner
label={_(msg`Change password dialog`)}
label={l`Change password dialog`}
style={web({maxWidth: 400})}>
<View style={[a.gap_xl]}>
<View style={[a.gap_sm]}>
@@ -190,18 +171,7 @@ function Inner() {
<TextField.LabelText>
<Trans>Confirmation code</Trans>
</TextField.LabelText>
<TextField.Root>
<TextField.Input
label={_(msg`Confirmation code`)}
placeholder="XXXXX-XXXXX"
value={resetCode}
onChangeText={setResetCode}
onBlur={onBlur}
autoCapitalize="none"
autoCorrect={false}
autoComplete="one-time-code"
/>
</TextField.Root>
<TokenField value={resetCode} onChangeText={setResetCode} />
</View>
<View>
<TextField.LabelText>
@@ -209,8 +179,8 @@ function Inner() {
</TextField.LabelText>
<TextField.Root>
<TextField.Input
label={_(msg`New password`)}
placeholder={_(msg`At least 8 characters`)}
label={l`New password`}
placeholder={l`At least 8 characters`}
value={newPassword}
onChangeText={setNewPassword}
secureTextEntry
@@ -227,18 +197,18 @@ function Inner() {
{stage === Stages.RequestCode ? (
<>
<Button
label={_(msg`Request code`)}
label={l`Request code`}
color="primary"
size="large"
disabled={isProcessing}
onPress={onRequestCode}>
onPress={() => void onRequestCode()}>
<ButtonText>
<Trans>Request code</Trans>
</ButtonText>
{isProcessing && <ButtonIcon icon={Loader} />}
</Button>
<Button
label={_(msg`Already have a code?`)}
label={l`Already have a code?`}
onPress={() => setStage(Stages.ChangePassword)}
size="large"
color="primary_subtle"
@@ -249,7 +219,7 @@ function Inner() {
</Button>
{IS_NATIVE && (
<Button
label={_(msg`Cancel`)}
label={l`Cancel`}
color="secondary"
size="large"
disabled={isProcessing}
@@ -263,18 +233,18 @@ function Inner() {
) : stage === Stages.ChangePassword ? (
<>
<Button
label={_(msg`Change password`)}
label={l`Change password`}
color="primary"
size="large"
disabled={isProcessing}
onPress={onChangePassword}>
onPress={() => void onChangePassword()}>
<ButtonText>
<Trans>Change password</Trans>
</ButtonText>
{isProcessing && <ButtonIcon icon={Loader} />}
</Button>
<Button
label={_(msg`Back`)}
label={l`Back`}
color="secondary"
size="large"
disabled={isProcessing}
@@ -289,7 +259,7 @@ function Inner() {
</>
) : stage === Stages.Done ? (
<Button
label={_(msg`Close`)}
label={l`Close`}
color="primary"
size="large"
onPress={() => control.close()}>