Adds password confirmation on setting a new password on Settings screen

components/settings/password/create.js

@@ -6,17 +6,35 @@ import {
 import nodejs from 'nodejs-mobile-react-native'
 import AppText from '../../app-text'
 import styles from '../../../styles'
-import { settings as labels } from '../../../i18n/en/settings'
+import { settings } from '../../../i18n/en/settings'
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
 import PasswordField from './password-field'
 import showBackUpReminder from './show-backup-reminder'
 
+const SettingsButton = ({ children, ...props }) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.settingsButton,
+        props.disabled ? styles.settingsButtonDisabled : null
+      ]}
+      { ...props }
+    >
+      <AppText style={styles.settingsButtonText}>
+        {children}
+      </AppText>
+    </TouchableOpacity>
+  )
+}
+
 export default class CreatePassword extends Component {
   constructor() {
     super()
     this.state = {
-      enteringNewPassword: false,
+      isSettingPassword: false,
-      newPassword: null
+      password: '',
+      passwordConfirmation: '',
+      shouldShowErrorMessage: false,
     }
     nodejs.channel.addListener(
       'create-pw-hash',
@@ -29,33 +47,91 @@ export default class CreatePassword extends Component {
     nodejs.channel.removeListener('create-pw-hash', changeEncryptionAndRestartApp)
   }
 
+  savePassword = () => {
+    if (this.comparePasswords()) {
+      requestHash('create-pw-hash', this.state.password)
+    } else {
+      this.setState({
+        shouldShowErrorMessage: true
+      })
+    }
+  }
+
+  toggleSettingPassword = () => {
+    const { isSettingPassword } = this.state
+    this.setState({ isSettingPassword: !isSettingPassword })
+  }
+
+  startSettingPassword = () => {
+    showBackUpReminder(this.toggleSettingPassword)
+  }
+
+  comparePasswords = () => {
+    return this.state.password === this.state.passwordConfirmation
+  }
+
+  handlePasswordInput = (password) => {
+    this.setState({ password })
+  }
+
+  handleConfirmationInput = (passwordConfirmation) => {
+    const { password } = this.state
+    this.setState({
+      passwordConfirmation,
+      isPasswordsMatch: passwordConfirmation === password
+    })
+  }
+
   render () {
-    return (
+    const {
-      <View>
+      isSettingPassword,
-        {this.state.enteringNewPassword &&
+      password,
+      passwordConfirmation,
+      shouldShowErrorMessage,
+    } = this.state
+    const labels = settings.passwordSettings
+
+    const isSaveButtonDisabled =
+      !password.length ||
+      !passwordConfirmation.length
+
+    if (!isSettingPassword) {
+      return (
+        <View>
+          <SettingsButton onPress={this.startSettingPassword}>
+            {labels.setPassword}
+          </SettingsButton>
+        </View>
+      )
+    } else {
+      return (
+        <View>
           <PasswordField
-            placeholder={labels.passwordSettings.enterNew}
+            placeholder={labels.enterNew}
-            value={this.state.newPassword}
+            value={password}
-            onChangeText={val => this.setState({newPassword: val})}
+            onChangeText={this.handlePasswordInput}
           />
-        }
+          <PasswordField
-        <TouchableOpacity
+            autoFocus={false}
-          onPress={() => {
+            placeholder={labels.confirmPassword}
-            if (!this.state.enteringNewPassword) {
+            value={passwordConfirmation}
-              showBackUpReminder(() => {
+            onChangeText={this.handleConfirmationInput}
-                this.setState({ enteringNewPassword: true })
+          />
-              })
+          {
-            } else {
+            shouldShowErrorMessage &&
-              requestHash('create-pw-hash', this.state.newPassword)
+            <AppText style={styles.errorMessage}>
-            }
+              {labels.passwordsDontMatch}
-          }}
+            </AppText>
-          disabled={this.state.enteringNewPassword && !this.state.newPassword}
+          }
-          style={styles.settingsButton}>
+          <SettingsButton
-          <AppText style={styles.settingsButtonText}>
+            onPress={this.savePassword}
-            {labels.passwordSettings.setPassword}
+            disabled={isSaveButtonDisabled}
-          </AppText>
+          >
-        </TouchableOpacity>
+            {labels.savePassword}
-      </View>
+          </SettingsButton>
-    )
+        </View>
+      )
+    }
+
   }
 }

components/settings/password/password-field.js

@@ -6,7 +6,7 @@ export default function PasswordField(props) {
   return (
     <TextInput
       style={styles.passwordField}
-      autoFocus={true}
+      autoFocus={props.autoFocus === false ? false : true}
       secureTextEntry={true}
       onChangeText={props.onChangeText}
       value={props.value}

i18n/en/settings.js

@@ -51,10 +51,13 @@ export const settings = {
     explainerDisabled: "Encrypt the app's database with a password. You need to enter the password every time the app is started.",
     explainerEnabled: "Password protection and database encryption is currently enabled",
     setPassword: 'Set password',
+    savePassword: 'Save password',
     changePassword: 'Change password',
     deletePassword: 'Delete password',
     enterCurrent: "Please enter your current password",
     enterNew: "Please enter a new password",
+    confirmPassword: "Please confirm your password",
+    passwordsDontMatch: "Password and confirmation don't match",
     backupReminderTitle: 'Read this before making changes to your password',
     backupReminder: 'Just to be safe, please backup your data using the export function before making changes to your password.\n\nLonger passwords are better! Consider using a passphrase.\n\nPlease also make sure you do not lose your password. There is no way to recover your data if you do.\n\nMaking any changes to your password setting will keep your data as it was before and restart the app.',
     deleteBackupReminderTitle: 'Read this before deleting your password',

styles/index.js

@@ -76,6 +76,11 @@ export default StyleSheet.create({
     borderRadius: 100,
     position: 'absolute'
   },
+  errorMessage: {
+    color: shadesOfRed[2],
+    marginLeft: 10,
+    marginTop: 6,
+  },
   homeView: {
     marginHorizontal: 50,
     marginTop: 20,
@@ -263,6 +268,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     margin: 10,
   },
+  settingsButtonDisabled: {
+    backgroundColor: colorInActive
+  },
   settingsButtonText: {
     color: fontOnPrimaryColor
   },