Bug fix for showing irrelevant buttons on the password management page

components/settings/password/delete.js

@@ -14,6 +14,7 @@ export default class DeletePassword extends Component {
 
   startConfirmWithPassword = () => {
     this.setState({ enteringCurrentPassword: true })
+    this.props.onStartDeletingPassword()
   }
 
   startDeletePassword = async () => {

components/settings/password/index.js

@@ -15,29 +15,57 @@ export default class PasswordSetting extends Component {
     super(props)
     this.state = {
       showUpdateAndDelete: hasEncryptionObservable.value,
-      showCreate: !hasEncryptionObservable.value
+      showCreate: !hasEncryptionObservable.value,
+      isChangingPassword: false,
+      isDeletingPassword: false
     }
   }
 
+  onChangingPassword = () => {
+    this.setState({ isChangingPassword: true })
+  }
+
+  onDeletingPassword = () => {
+    this.setState({ isDeletingPassword: true })
+  }
+
   render() {
+
+    const {
+      showUpdateAndDelete,
+      isChangingPassword,
+      isDeletingPassword,
+      showCreate
+    } = this.state
+
     return (
       <ScrollView>
         <SettingsSegment title={labels.passwordSettings.title}>
 
-          {this.state.showUpdateAndDelete ?
+          {showUpdateAndDelete ?
             <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
             :
             <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
           }
 
-          {this.state.showUpdateAndDelete &&
-          <View>
-            <ChangePassword/>
-            <DeletePassword/>
-          </View>
+          {
+            showUpdateAndDelete && (
+              <View>
+                {(isChangingPassword
+                  || !isChangingPassword && !isDeletingPassword)
+                && <ChangePassword
+                  onStartChangingPassword = {this.onChangingPassword}
+                />}
+                {(isDeletingPassword
+                  || !isChangingPassword && !isDeletingPassword)
+                && <DeletePassword
+                  onStartDeletingPassword = {this.onDeletingPassword}
+                />}
+              </View>
+            )
           }
 
-          {this.state.showCreate &&
+          {showCreate &&
           <CreatePassword/>
           }
 

components/settings/password/update.js

@@ -20,6 +20,7 @@ export default class ChangePassword extends Component {
     showBackUpReminder(() => {
       this.setState({ enteringCurrentPassword: true })
     })
+    this.props.onStartChangingPassword()
   }
 
   startEnteringNewPassword = () => {