alf change password dialog

src/components/dialogs/ChangePasswordDialog.tsx

@@ -0,0 +1,297 @@
+import {useState} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import * as EmailValidator from 'email-validator'
+
+import {cleanError, isNetworkError} from '#/lib/strings/errors'
+import {checkAndFormatResetCode} from '#/lib/strings/password'
+import {logger} from '#/logger'
+import {useAgent, useSession} from '#/state/session'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {atoms as a, useBreakpoints, web} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import * as TextField from '#/components/forms/TextField'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+enum Stages {
+  RequestCode = 'RequestCode',
+  ChangePassword = 'ChangePassword',
+  Done = 'Done',
+}
+
+export function ChangePasswordDialog({
+  control,
+}: {
+  control: Dialog.DialogControlProps
+}) {
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+      <Inner />
+    </Dialog.Outer>
+  )
+}
+
+function Inner() {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const agent = useAgent()
+  const {gtMobile} = useBreakpoints()
+  const control = Dialog.useDialogContext()
+
+  const [stage, setStage] = useState(Stages.RequestCode)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [resetCode, setResetCode] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [error, setError] = useState('')
+
+  const uiStrings = {
+    RequestCode: {
+      title: _(msg`Change Password`),
+      message: _(
+        msg`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`Enter the code you received to change your password.`),
+    },
+    Done: {
+      title: _(msg`Password Changed`),
+      message: _(msg`Your password has been changed successfully!`),
+    },
+  }
+
+  const onRequestCode = async () => {
+    if (
+      !currentAccount?.email ||
+      !EmailValidator.validate(currentAccount.email)
+    ) {
+      return setError(_(msg`Your email appears to be invalid.`))
+    }
+
+    setError('')
+    setIsProcessing(true)
+    try {
+      await agent.com.atproto.server.requestPasswordReset({
+        email: currentAccount.email,
+      })
+      setStage(Stages.ChangePassword)
+    } catch (e: any) {
+      logger.warn('Failed to request password reset', {error: e})
+      if (isNetworkError(e)) {
+        setError(
+          _(
+            msg`Unable to contact your service. Please check your Internet connection.`,
+          ),
+        )
+      } else {
+        setError(cleanError(e))
+      }
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const onChangePassword = async () => {
+    const formattedCode = checkAndFormatResetCode(resetCode)
+    if (!formattedCode) {
+      setError(
+        _(
+          msg`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.`),
+      )
+      return
+    }
+    if (newPassword.length < 8) {
+      setError(_(msg`Password must be at least 8 characters long.`))
+      return
+    }
+
+    setError('')
+    setIsProcessing(true)
+    try {
+      await agent.com.atproto.server.resetPassword({
+        token: formattedCode,
+        password: newPassword,
+      })
+      setStage(Stages.Done)
+    } catch (e: any) {
+      logger.warn('Failed to set new password', {error: e})
+      if (isNetworkError(e)) {
+        setError(
+          _(
+            msg`Unable to contact your service. Please check your Internet connection.`,
+          ),
+        )
+      } else {
+        setError(cleanError(e))
+      }
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const onBlur = () => {
+    const formattedCode = checkAndFormatResetCode(resetCode)
+    if (!formattedCode) {
+      return
+    }
+    setResetCode(formattedCode)
+  }
+
+  return (
+    <Dialog.ScrollableInner
+      label={_(msg`Change password dialog`)}
+      style={web({maxWidth: 450})}>
+      <Dialog.Close />
+      <View style={[a.gap_xl]}>
+        <View style={[a.gap_sm]}>
+          <Text style={[a.font_heavy, a.text_2xl]}>
+            {uiStrings[stage].title}
+          </Text>
+          {error ? (
+            <View style={[a.rounded_sm, a.overflow_hidden]}>
+              <ErrorMessage message={error} />
+            </View>
+          ) : null}
+
+          <Text style={[a.text_md, a.leading_snug]}>
+            {uiStrings[stage].message}
+          </Text>
+        </View>
+
+        {stage === Stages.ChangePassword && (
+          <View style={[a.gap_md]}>
+            <View>
+              <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>
+            </View>
+            <View>
+              <TextField.LabelText>
+                <Trans>New Password</Trans>
+              </TextField.LabelText>
+              <TextField.Root>
+                <TextField.Input
+                  label={_(msg`New password`)}
+                  placeholder={_(msg`At least 8 characters`)}
+                  value={newPassword}
+                  onChangeText={setNewPassword}
+                  secureTextEntry
+                  autoCapitalize="none"
+                  autoComplete="new-password"
+                />
+              </TextField.Root>
+            </View>
+          </View>
+        )}
+
+        <View style={[a.gap_sm, gtMobile && [a.flex_row_reverse, a.ml_auto]]}>
+          {stage === Stages.RequestCode ? (
+            <>
+              <Button
+                label={_(msg`Request Code`)}
+                variant="solid"
+                color="primary"
+                size="large"
+                disabled={isProcessing}
+                onPress={onRequestCode}>
+                <ButtonText>
+                  <Trans>Request Code</Trans>
+                </ButtonText>
+                {isProcessing && <ButtonIcon icon={Loader} />}
+              </Button>
+              {gtMobile ? (
+                <Button
+                  label={_(msg`Already have a code?`)}
+                  onPress={() => setStage(Stages.ChangePassword)}
+                  size="large"
+                  color="primary"
+                  variant="ghost"
+                  disabled={isProcessing}>
+                  <ButtonText>
+                    <Trans>Already have a code?</Trans>
+                  </ButtonText>
+                </Button>
+              ) : (
+                <Button
+                  label={_(msg`Cancel`)}
+                  variant="solid"
+                  color="secondary"
+                  size="large"
+                  disabled={isProcessing}
+                  onPress={() => control.close()}>
+                  <ButtonText>
+                    <Trans>Cancel</Trans>
+                  </ButtonText>
+                </Button>
+              )}
+            </>
+          ) : stage === Stages.ChangePassword ? (
+            <>
+              <Button
+                label={_(msg`Change Password`)}
+                variant="solid"
+                color="primary"
+                size="large"
+                disabled={isProcessing}
+                onPress={onChangePassword}>
+                <ButtonText>
+                  <Trans>Change Password</Trans>
+                </ButtonText>
+                {isProcessing && <ButtonIcon icon={Loader} />}
+              </Button>
+              <Button
+                label={_(msg`Back`)}
+                variant="solid"
+                color="secondary"
+                size="large"
+                disabled={isProcessing}
+                onPress={() => {
+                  setResetCode('')
+                  setStage(Stages.RequestCode)
+                }}>
+                <ButtonText>
+                  <Trans>Back</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          ) : stage === Stages.Done ? (
+            <Button
+              label={_(msg`Close`)}
+              variant="solid"
+              color="primary"
+              size="large"
+              onPress={() => control.close()}>
+              <ButtonText>
+                <Trans>Close</Trans>
+              </ButtonText>
+            </Button>
+          ) : null}
+        </View>
+      </View>
+    </Dialog.ScrollableInner>
+  )
+}

src/screens/Settings/AccountSettings.tsx

@@ -10,6 +10,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {AgeAssuranceAccountCard} from '#/components/ageAssurance/AgeAssuranceAccountCard'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
+import {ChangePasswordDialog} from '#/components/dialogs/ChangePasswordDialog'
 import {
   EmailDialogScreenID,
   useEmailDialogControl,
@@ -37,6 +38,7 @@ export function AccountSettingsScreen({}: Props) {
   const emailDialogControl = useEmailDialogControl()
   const birthdayControl = useDialogControl()
   const changeHandleControl = useDialogControl()
+  const changePasswordControl = useDialogControl()
   const exportCarControl = useDialogControl()
   const deactivateAccountControl = useDialogControl()
 
@@ -117,7 +119,7 @@ export function AccountSettingsScreen({}: Props) {
           <SettingsList.Divider />
           <SettingsList.PressableItem
             label={_(msg`Password`)}
-            onPress={() => openModal({name: 'change-password'})}>
+            onPress={() => changePasswordControl.open()}>
             <SettingsList.ItemIcon icon={LockIcon} />
             <SettingsList.ItemText>
               <Trans>Password</Trans>
@@ -180,6 +182,7 @@ export function AccountSettingsScreen({}: Props) {
 
       <BirthDateSettingsDialog control={birthdayControl} />
       <ChangeHandleDialog control={changeHandleControl} />
+      <ChangePasswordDialog control={changePasswordControl} />
       <ExportCarDialog control={exportCarControl} />
       <DeactivateAccountDialog control={deactivateAccountControl} />
     </Layout.Screen>