Implement wrong-password-try-again? flow

components/labels.js

@@ -3,7 +3,10 @@ export const shared = {
   save: 'Save',
   errorTitle: 'Error',
   successTitle: 'Success',
-  warning: 'Warning'
+  warning: 'Warning',
+  incorrectPassword: 'Password incorrect',
+  incorrectPasswordMessage: 'That password is incorrect.',
+  tryAgain: 'Try again'
 }
 
 export const settings = {
@@ -52,8 +55,9 @@ export const settings = {
   passwordSettings: {
     title: 'App password',
     explainerDisabled: "Encrypt the app's database with a password. You have to enter the password every time the app is started.",
-    explainerEnabled: "Your app's data is encrypted with your password.",
-    deletePassword: "Delete password"
+    explainerEnabled: "Password protection and database encryption is currently enabled",
+    deletePassword: "Delete password",
+    enterCurrent: "Please enter your current password",
   }
 }
 

components/password-prompt.js

@@ -1,17 +1,19 @@
 import React, { Component } from 'react'
-import { View, TextInput, TouchableOpacity } from 'react-native'
+import { View, TextInput, TouchableOpacity, Alert } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { AppText } from './app-text'
 import { hasEncryptionObservable } from '../local-storage'
 import styles from '../styles'
-import { passwordPrompt } from './labels'
+import { passwordPrompt, shared } from './labels'
 import { openDbConnection, requestHash, deleteDbAndOpenNew, openDb } from '../db'
 import App from './app'
 
 export default class PasswordPrompt extends Component {
   constructor() {
     super()
-    this.state = {}
+    this.state = {
+      password: null
+    }
     hasEncryptionObservable.once((hasEncryption) => {
       if (hasEncryption) {
         this.setState({showPasswordPrompt: true})
@@ -36,7 +38,14 @@ export default class PasswordPrompt extends Component {
       await openDb({hash: msg.message, persistConnection: true })
       this.setState({ showApp: true })
     } catch (err) {
-      this.setState({ wrongPassword: true })
+      Alert.alert(
+        shared.incorrectPassword,
+        shared.incorrectPasswordMessage,
+        [{
+          text: shared.tryAgain,
+          onPress: () => this.setState({password: null})
+        }]
+      )
     }
   }
 
@@ -50,16 +59,12 @@ export default class PasswordPrompt extends Component {
         {this.state.showApp ?
           <App password={this.state.password}/>
           :
-          <View>
+          <View style={styles.passwordPrompt}>
             {this.state.showPasswordPrompt &&
               <View>
                 <TextInput
                   onChangeText={val => this.setState({password: val})}
-                  style={{
-                    borderWidth: 1,
-                    borderColor: 'grey',
-                    margin: 5
-                  }}
+                  style={styles.passwordField}
                 />
                 <TouchableOpacity
                   style={styles.settingsButton}
@@ -71,7 +76,6 @@ export default class PasswordPrompt extends Component {
                     { passwordPrompt.title }
                   </AppText>
                 </TouchableOpacity>
-                {this.state.wrongPassword && <AppText>Wrong PAssword!</AppText>}
                 <TouchableOpacity
                   style={styles.settingsButton}
                   onPress={async () => {

components/settings/password-setting.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   TouchableOpacity,
-  TextInput
+  TextInput,
+  Alert
 } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { AppText } from '../app-text'
@@ -10,14 +11,16 @@ import {
   hasEncryptionObservable
 } from '../../local-storage'
 import styles from '../../styles/index'
-import { settings as labels } from '../labels'
+import { settings as labels, shared } from '../labels'
 import { requestHash, openDb } from '../../db'
 
 export default class PasswordSetting extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      enabled: hasEncryptionObservable.value
+      enabled: hasEncryptionObservable.value,
+      currentPassword: null,
+      enteringCurrentPassword: false
     }
 
     nodejs.start('main.js')
@@ -38,11 +41,25 @@ export default class PasswordSetting extends Component {
     try {
       await openDb({ hash: msg.message, persistConnection: false })
       this.setState({
-        wrongPassword: false,
-        enterOldPassword: false
+        enteringCurrentPassword: false
       })
     } catch (err) {
-      this.setState({wrongPassword: true})
+      Alert.alert(
+        shared.incorrectPassword,
+        shared.incorrectPasswordMessage,
+        [{
+          text: shared.cancel,
+          onPress: () => {
+            this.setState({
+              enteringCurrentPassword: false,
+              currentPassword: null
+            })
+          }
+        }, {
+          text: shared.tryAgain,
+          onPress: () => this.setState({currentPassword: null})
+        }]
+      )
     }
   }
 
@@ -57,21 +74,27 @@ export default class PasswordSetting extends Component {
           :
           <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
         }
-        {this.state.enterOldPassword &&
+        {this.state.enteringCurrentPassword &&
+          <View>
             <TextInput
-            style={{
-              backgroundColor: 'white',
+              style={styles.passwordField}
+              onChangeText={val => {
+                this.setState({
+                  currentPassword: val,
+                  wrongPassword: false
+                })
               }}
-            onChangeText={val => this.setState({ oldPassword: val })}
+              value={this.state.currentPassword}
+              placeholder={labels.passwordSettings.enterCurrent}
             />
+          </View>
         }
-        {this.state.wrongPassword && <AppText>Wrong PAssword!</AppText>}
         <TouchableOpacity
           onPress={() => {
-            if (!this.state.enterOldPassword) {
-              this.setState({ enterOldPassword: true })
+            if (!this.state.enteringCurrentPassword) {
+              this.setState({ enteringCurrentPassword: true })
             } else {
-              requestHash(this.state.oldPassword)
+              requestHash(this.state.currentPassword)
             }
           }}
           style={styles.settingsButton}>

styles/index.js

@@ -249,6 +249,17 @@ export default StyleSheet.create({
     fontSize: 20,
     color: secondaryColor,
     marginTop: 1
+  },
+  passwordField: {
+    backgroundColor: 'white',
+    padding: 10,
+    marginTop: 10,
+    marginHorizontal: 10
+  },
+  passwordPrompt: {
+    backgroundColor: 'lightgrey',
+    flex: 1,
+    padding: 30
   }
 })
 
@@ -268,6 +279,6 @@ export const iconStyles = {
     color: fontOnPrimaryColor
   },
   menuIconInactive: {
-    color: 'lightgrey'
+    color: 'lightgrey',
   },
 }