Reuses SettingsButton component

components/settings/password/update.js

@@ -10,9 +10,11 @@ import { shared } from '../../../i18n/en/labels'
 import { settings as labels } from '../../../i18n/en/settings'
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
 import PasswordField from './password-field'
+import SettingsButton from './settings-button'
 import showBackUpReminder from './show-backup-reminder'
 import checkCurrentPassword from './check-current-password'
 
+
 export default class ChangePassword extends Component {
   constructor() {
     super()
@@ -60,21 +62,23 @@ export default class ChangePassword extends Component {
     }
   }
 
+  startChangingPassword = () => {
+    showBackUpReminder(() => {
+      this.setState({ enteringCurrentPassword: true })
+    })
+  }
+
   render() {
     return (
       <View>
         {!this.state.enteringCurrentPassword &&
          !this.state.enteringNewPassword &&
-          <TouchableOpacity
+         <SettingsButton
-            onPress={() => showBackUpReminder(() => {
+           onPress={this.startChangingPassword}
-              this.setState({ enteringCurrentPassword: true })
-            })}
            disabled={this.state.currentPassword}
-            style={styles.settingsButton}>
+         >
-            <AppText style={styles.settingsButtonText}>
            {labels.passwordSettings.changePassword}
-            </AppText>
+         </SettingsButton>
-          </TouchableOpacity>
         }
 
         {this.state.enteringCurrentPassword &&
@@ -89,14 +93,12 @@ export default class ChangePassword extends Component {
               value={this.state.currentPassword}
               placeholder={labels.passwordSettings.enterCurrent}
             />
-            <TouchableOpacity
+            <SettingsButton
               onPress={() => requestHash('pre-change-pw-check', this.state.currentPassword)}
               disabled={!this.state.currentPassword}
-              style={styles.settingsButton}>
+            >
-              <AppText style={styles.settingsButtonText}>
               {shared.unlock}
-              </AppText>
+            </SettingsButton>
-            </TouchableOpacity>
           </View>
         }
 
@@ -112,15 +114,12 @@ export default class ChangePassword extends Component {
             value={this.state.changedPassword}
             placeholder={labels.passwordSettings.enterNew}
           />
-
+          <SettingsButton
-          <TouchableOpacity
             onPress={() => requestHash('change-pw', this.state.newPassword)}
             disabled={ !this.state.newPassword }
-            style={styles.settingsButton}>
+          >
-            <AppText style={styles.settingsButtonText}>
             {labels.passwordSettings.changePassword}
-            </AppText>
+          </SettingsButton>
-          </TouchableOpacity>
         </View>
         }