password flow improvements (#2730)

* add button to skip sending reset code

* add validation to reset code

* comments

* update test id

* consistency sneak in - everything capitalized

* add change password button to settings

* create a modal for password change

* change password modal

* remove unused styles

* more improvements

* improve layout

* change done button color

* add already have a code to modal

* remove unused prop

* icons, auto add dash

* cleanup

* better appearance on android

* Remove log

* Improve error messages and add specificity to function names

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/screens/Settings.tsx

@@ -647,7 +647,7 @@ export function SettingsScreen({}: Props) {
             />
           </View>
           <Text type="lg" style={pal.text}>
-            <Trans>App passwords</Trans>
+            <Trans>App Passwords</Trans>
           </Text>
         </TouchableOpacity>
         <TouchableOpacity
@@ -668,7 +668,7 @@ export function SettingsScreen({}: Props) {
             />
           </View>
           <Text type="lg" style={pal.text} numberOfLines={1}>
-            <Trans>Change handle</Trans>
+            <Trans>Change Handle</Trans>
           </Text>
         </TouchableOpacity>
         {isNative && (
@@ -684,8 +684,29 @@ export function SettingsScreen({}: Props) {
         )}
         <View style={styles.spacer20} />
         <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          <Trans>Danger Zone</Trans>
+          <Trans>Account</Trans>
         </Text>
+        <TouchableOpacity
+          testID="changePasswordBtn"
+          style={[
+            styles.linkCard,
+            pal.view,
+            isSwitchingAccounts && styles.dimmed,
+          ]}
+          onPress={() => openModal({name: 'change-password'})}
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`Change password`)}
+          accessibilityHint={_(msg`Change your Bluesky password`)}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <FontAwesomeIcon
+              icon="lock"
+              style={pal.text as FontAwesomeIconStyle}
+            />
+          </View>
+          <Text type="lg" style={pal.text} numberOfLines={1}>
+            <Trans>Change Password</Trans>
+          </Text>
+        </TouchableOpacity>
         <TouchableOpacity
           style={[pal.view, styles.linkCard]}
           onPress={onPressDeleteAccount}
@@ -703,7 +724,7 @@ export function SettingsScreen({}: Props) {
             />
           </View>
           <Text type="lg" style={dangerText}>
-            <Trans>Delete my account…</Trans>
+            <Trans>Delete My Account…</Trans>
           </Text>
         </TouchableOpacity>
         <View style={styles.spacer20} />