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 <[e-mail]>

* 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 <[e-mail]>

src/screens/Settings/AccountSettings.tsx

···
 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'
 
···
   const emailDialogControl = useEmailDialogControl()
   const birthdayControl = useDialogControl()
   const changeHandleControl = useDialogControl()
+  const changePasswordControl = useDialogControl()
   const exportCarControl = useDialogControl()
   const deactivateAccountControl = useDialogControl()
 
···
           <SettingsList.Divider />
           <SettingsList.PressableItem
             label={_(msg`Password`)}
-            onPress={() => openModal({name: 'change-password'})}>
+            onPress={() => changePasswordControl.open()}>
             <SettingsList.ItemIcon icon={LockIcon} />
             <SettingsList.ItemText>
               <Trans>Password</Trans>
···
 
       <BirthDateSettingsDialog control={birthdayControl} />
       <ChangeHandleDialog control={changeHandleControl} />
+      <ChangePasswordDialog control={changePasswordControl} />
       <ExportCarDialog control={exportCarControl} />
       <DeactivateAccountDialog control={deactivateAccountControl} />
     </Layout.Screen>

src/screens/Settings/components/ChangePasswordDialog.tsx

···
+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>
+  )
+}

src/state/modals/index.tsx

···
   name: 'post-languages-settings'
 }
 
-export interface ChangePasswordModal {
-  name: 'change-password'
-}
-
 /**
  * @deprecated DO NOT ADD NEW MODALS
  */
 export type Modal =
   // Account
   | DeleteAccountModal
-  | ChangePasswordModal
 
   // Curation
   | ContentLanguagesSettingsModal

src/view/com/modals/ChangePassword.tsx

···
-import {useState} from 'react'
-import {
-  ActivityIndicator,
-  SafeAreaView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import * as EmailValidator from 'email-validator'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {cleanError, isNetworkError} from '#/lib/strings/errors'
-import {checkAndFormatResetCode} from '#/lib/strings/password'
-import {colors, s} from '#/lib/styles'
-import {logger} from '#/logger'
-import {isAndroid, isWeb} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
-import {useAgent, useSession} from '#/state/session'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {Button} from '../util/forms/Button'
-import {Text} from '../util/text/Text'
-import {ScrollView} from './util'
-import {TextInput} from './util'
-
-enum Stages {
-  RequestCode,
-  ChangePassword,
-  Done,
-}
-
-export const snapPoints = isAndroid ? ['90%'] : ['45%']
-
-export function Component() {
-  const pal = usePalette('default')
-  const {currentAccount} = useSession()
-  const agent = useAgent()
-  const {_} = useLingui()
-  const [stage, setStage] = useState<Stages>(Stages.RequestCode)
-  const [isProcessing, setIsProcessing] = useState<boolean>(false)
-  const [resetCode, setResetCode] = useState<string>('')
-  const [newPassword, setNewPassword] = useState<string>('')
-  const [error, setError] = useState<string>('')
-  const {isMobile} = useWebMediaQueries()
-  const {closeModal} = useModalControls()
-
-  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) {
-      const errMsg = e.toString()
-      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(errMsg))
-      }
-    } 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) {
-      const errMsg = e.toString()
-      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(errMsg))
-      }
-    } finally {
-      setIsProcessing(false)
-    }
-  }
-
-  const onBlur = () => {
-    const formattedCode = checkAndFormatResetCode(resetCode)
-    if (!formattedCode) {
-      setError(
-        _(
-          msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`,
-        ),
-      )
-      return
-    }
-    setResetCode(formattedCode)
-  }
-
-  return (
-    <SafeAreaView style={[pal.view, s.flex1]}>
-      <ScrollView
-        contentContainerStyle={[
-          styles.container,
-          isMobile && styles.containerMobile,
-        ]}
-        keyboardShouldPersistTaps="handled">
-        <View>
-          <View style={styles.titleSection}>
-            <Text type="title-lg" style={[pal.text, styles.title]}>
-              {stage !== Stages.Done
-                ? _(msg`Change Password`)
-                : _(msg`Password Changed`)}
-            </Text>
-          </View>
-
-          <Text type="lg" style={[pal.textLight, {marginBottom: 10}]}>
-            {stage === Stages.RequestCode ? (
-              <Trans>
-                If you want to change your password, we will send you a code to
-                verify that this is your account.
-              </Trans>
-            ) : stage === Stages.ChangePassword ? (
-              <Trans>
-                Enter the code you received to change your password.
-              </Trans>
-            ) : (
-              <Trans>Your password has been changed successfully!</Trans>
-            )}
-          </Text>
-
-          {stage === Stages.RequestCode && (
-            <View style={[s.flexRow, s.justifyCenter, s.mt10]}>
-              <TouchableOpacity
-                testID="skipSendEmailButton"
-                onPress={() => setStage(Stages.ChangePassword)}
-                accessibilityRole="button"
-                accessibilityLabel={_(msg`Go to next`)}
-                accessibilityHint={_(msg`Navigates to the next screen`)}>
-                <Text type="xl" style={[pal.link, s.pr5]}>
-                  <Trans>Already have a code?</Trans>
-                </Text>
-              </TouchableOpacity>
-            </View>
-          )}
-          {stage === Stages.ChangePassword && (
-            <View style={[pal.border, styles.group]}>
-              <View style={[styles.groupContent]}>
-                <FontAwesomeIcon
-                  icon="ticket"
-                  style={[pal.textLight, styles.groupContentIcon]}
-                />
-                <TextInput
-                  testID="codeInput"
-                  style={[pal.text, styles.textInput]}
-                  placeholder={_(msg`Reset code`)}
-                  placeholderTextColor={pal.colors.textLight}
-                  value={resetCode}
-                  onChangeText={setResetCode}
-                  onFocus={() => setError('')}
-                  onBlur={onBlur}
-                  accessible={true}
-                  accessibilityLabel={_(msg`Reset Code`)}
-                  accessibilityHint=""
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  autoComplete="off"
-                />
-              </View>
-              <View
-                style={[
-                  pal.borderDark,
-                  styles.groupContent,
-                  styles.groupBottom,
-                ]}>
-                <FontAwesomeIcon
-                  icon="lock"
-                  style={[pal.textLight, styles.groupContentIcon]}
-                />
-                <TextInput
-                  testID="codeInput"
-                  style={[pal.text, styles.textInput]}
-                  placeholder={_(msg`New password`)}
-                  placeholderTextColor={pal.colors.textLight}
-                  onChangeText={setNewPassword}
-                  secureTextEntry
-                  accessible={true}
-                  accessibilityLabel={_(msg`New Password`)}
-                  accessibilityHint=""
-                  autoCapitalize="none"
-                  autoComplete="new-password"
-                />
-              </View>
-            </View>
-          )}
-          {error ? (
-            <ErrorMessage message={error} style={styles.error} />
-          ) : undefined}
-        </View>
-        <View style={[styles.btnContainer]}>
-          {isProcessing ? (
-            <View style={styles.btn}>
-              <ActivityIndicator color="#fff" />
-            </View>
-          ) : (
-            <View style={{gap: 6}}>
-              {stage === Stages.RequestCode && (
-                <Button
-                  testID="requestChangeBtn"
-                  type="primary"
-                  onPress={onRequestCode}
-                  accessibilityLabel={_(msg`Request Code`)}
-                  accessibilityHint=""
-                  label={_(msg`Request Code`)}
-                  labelContainerStyle={{justifyContent: 'center', padding: 4}}
-                  labelStyle={[s.f18]}
-                />
-              )}
-              {stage === Stages.ChangePassword && (
-                <Button
-                  testID="confirmBtn"
-                  type="primary"
-                  onPress={onChangePassword}
-                  accessibilityLabel={_(msg`Next`)}
-                  accessibilityHint=""
-                  label={_(msg`Next`)}
-                  labelContainerStyle={{justifyContent: 'center', padding: 4}}
-                  labelStyle={[s.f18]}
-                />
-              )}
-              <Button
-                testID="cancelBtn"
-                type={stage !== Stages.Done ? 'default' : 'primary'}
-                onPress={() => {
-                  closeModal()
-                }}
-                accessibilityLabel={
-                  stage !== Stages.Done ? _(msg`Cancel`) : _(msg`Close`)
-                }
-                accessibilityHint=""
-                label={stage !== Stages.Done ? _(msg`Cancel`) : _(msg`Close`)}
-                labelContainerStyle={{justifyContent: 'center', padding: 4}}
-                labelStyle={[s.f18]}
-              />
-            </View>
-          )}
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'space-between',
-  },
-  containerMobile: {
-    paddingHorizontal: 18,
-    paddingBottom: 35,
-  },
-  titleSection: {
-    paddingTop: isWeb ? 0 : 4,
-    paddingBottom: isWeb ? 14 : 10,
-  },
-  title: {
-    textAlign: 'center',
-    fontWeight: '600',
-    marginBottom: 5,
-  },
-  error: {
-    borderRadius: 6,
-  },
-  textInput: {
-    width: '100%',
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    fontSize: 16,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.blue3,
-  },
-  btnContainer: {
-    paddingTop: 20,
-  },
-  group: {
-    borderWidth: 1,
-    borderRadius: 10,
-    marginVertical: 20,
-  },
-  groupLabel: {
-    paddingHorizontal: 20,
-    paddingBottom: 5,
-  },
-  groupContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  groupBottom: {
-    borderTopWidth: 1,
-  },
-  groupContentIcon: {
-    marginLeft: 10,
-  },
-})

src/view/com/modals/Modal.tsx

···
 import {useModalControls, useModals} from '#/state/modals'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
-import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as InviteCodesModal from './InviteCodes'
···
   } else if (activeModal?.name === 'post-languages-settings') {
     snapPoints = PostLanguagesSettingsModal.snapPoints
     element = <PostLanguagesSettingsModal.Component />
-  } else if (activeModal?.name === 'change-password') {
-    snapPoints = ChangePasswordModal.snapPoints
-    element = <ChangePasswordModal.Component />
   } else {
     return null
   }

src/view/com/modals/Modal.web.tsx

···
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {type Modal as ModalIface} from '#/state/modals'
 import {useModalControls, useModals} from '#/state/modals'
-import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as InviteCodesModal from './InviteCodes'
···
     element = <ContentLanguagesSettingsModal.Component />
   } else if (modal.name === 'post-languages-settings') {
     element = <PostLanguagesSettingsModal.Component />
-  } else if (modal.name === 'change-password') {
-    element = <ChangePasswordModal.Component />
   } else {
     return null
   }