Modernise change password dialog (#8269)

* alf change password dialog

* rm old modal

* move dialog

* fix buttons on native

* lowercase

* fix dupe import

* Apply suggestions from code review

Thanks @surfdude29 :)

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* use primary_subtle, change web layout

* move to into non-network err, warn -> error

* error -> safeMessage

* better message than token is invalid

* cancel button native only

* move close to end of focus priority

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

2 files changed, 304 insertions, 1 deletions

diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx
index 86652d277..8f320459c 100644
--- a/src/screens/Settings/AccountSettings.tsx
+++ b/src/screens/Settings/AccountSettings.tsx
@@ -25,6 +25,7 @@ import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/ic
 import {Trash_Stroke2_Corner2_Rounded} from '#/components/icons/Trash'
 import * as Layout from '#/components/Layout'
 import {ChangeHandleDialog} from './components/ChangeHandleDialog'
+import {ChangePasswordDialog} from './components/ChangePasswordDialog'
 import {DeactivateAccountDialog} from './components/DeactivateAccountDialog'
 import {ExportCarDialog} from './components/ExportCarDialog'
 
@@ -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>
diff --git a/src/screens/Settings/components/ChangePasswordDialog.tsx b/src/screens/Settings/components/ChangePasswordDialog.tsx
new file mode 100644
index 000000000..7e3e62eee
--- /dev/null
+++ b/src/screens/Settings/components/ChangePasswordDialog.tsx
@@ -0,0 +1,300 @@
+import {useState} from 'react'
+import {useWindowDimensions, 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 {isNative} from '#/platform/detection'
+import {useAgent, useSession} from '#/state/session'
+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 * 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
+}) {
+  const {height} = useWindowDimensions()
+
+  return (
+    <Dialog.Outer
+      control={control}
+      nativeOptions={android({minHeight: height / 2})}>
+      <Dialog.Handle />
+      <Inner />
+    </Dialog.Outer>
+  )
+}
+
+function Inner() {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const agent = useAgent()
+  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 your 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`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.`,
+      ),
+    },
+  }
+
+  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) {
+      if (isNetworkError(e)) {
+        setError(
+          _(
+            msg`Unable to contact your service. Please check your internet connection and try again.`,
+          ),
+        )
+      } else {
+        logger.error('Failed to request password reset', {safeMessage: e})
+        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) {
+      if (isNetworkError(e)) {
+        setError(
+          _(
+            msg`Unable to contact your service. Please check your internet connection and try again.`,
+          ),
+        )
+      } else if (e?.toString().includes('Token is invalid')) {
+        setError(_(msg`This confirmation code is not valid. Please try again.`))
+      } else {
+        logger.error('Failed to set new password', {safeMessage: e})
+        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: 400})}>
+      <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]}>
+          {stage === Stages.RequestCode ? (
+            <>
+              <Button
+                label={_(msg`Request code`)}
+                color="primary"
+                size="large"
+                disabled={isProcessing}
+                onPress={onRequestCode}>
+                <ButtonText>
+                  <Trans>Request code</Trans>
+                </ButtonText>
+                {isProcessing && <ButtonIcon icon={Loader} />}
+              </Button>
+              <Button
+                label={_(msg`Already have a code?`)}
+                onPress={() => setStage(Stages.ChangePassword)}
+                size="large"
+                color="primary_subtle"
+                disabled={isProcessing}>
+                <ButtonText>
+                  <Trans>Already have a code?</Trans>
+                </ButtonText>
+              </Button>
+              {isNative && (
+                <Button
+                  label={_(msg`Cancel`)}
+                  color="secondary"
+                  size="large"
+                  disabled={isProcessing}
+                  onPress={() => control.close()}>
+                  <ButtonText>
+                    <Trans>Cancel</Trans>
+                  </ButtonText>
+                </Button>
+              )}
+            </>
+          ) : stage === Stages.ChangePassword ? (
+            <>
+              <Button
+                label={_(msg`Change password`)}
+                color="primary"
+                size="large"
+                disabled={isProcessing}
+                onPress={onChangePassword}>
+                <ButtonText>
+                  <Trans>Change password</Trans>
+                </ButtonText>
+                {isProcessing && <ButtonIcon icon={Loader} />}
+              </Button>
+              <Button
+                label={_(msg`Back`)}
+                color="secondary"
+                size="large"
+                disabled={isProcessing}
+                onPress={() => {
+                  setResetCode('')
+                  setStage(Stages.RequestCode)
+                }}>
+                <ButtonText>
+                  <Trans>Back</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          ) : stage === Stages.Done ? (
+            <Button
+              label={_(msg`Close`)}
+              color="primary"
+              size="large"
+              onPress={() => control.close()}>
+              <ButtonText>
+                <Trans>Close</Trans>
+              </ButtonText>
+            </Button>
+          ) : null}
+        </View>
+      </View>
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}