From 2a7ffa4666aa4e815a387928b91b395caad16060 Mon Sep 17 00:00:00 2001
From: Sofiya Tepikin <sofiya.tepikin@gmail.com>
Date: Tue, 4 Dec 2018 22:52:49 +0100
Subject: [PATCH] Adds password confirmation on setting a new password on
 Settings screen

---
 components/settings/password/create.js        | 132 ++++++++++++++----
 .../settings/password/password-field.js       |   2 +-
 i18n/en/settings.js                           |   3 +
 styles/index.js                               |   8 ++
 4 files changed, 116 insertions(+), 29 deletions(-)

diff --git a/components/settings/password/create.js b/components/settings/password/create.js
index 87bd2bf..68b7b2d 100644
--- a/components/settings/password/create.js
+++ b/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,
-      newPassword: null
+      isSettingPassword: false,
+      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 (
-      <View>
-        {this.state.enteringNewPassword &&
+    const {
+      isSettingPassword,
+      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}
-            value={this.state.newPassword}
-            onChangeText={val => this.setState({newPassword: val})}
+            placeholder={labels.enterNew}
+            value={password}
+            onChangeText={this.handlePasswordInput}
           />
-        }
-        <TouchableOpacity
-          onPress={() => {
-            if (!this.state.enteringNewPassword) {
-              showBackUpReminder(() => {
-                this.setState({ enteringNewPassword: true })
-              })
-            } else {
-              requestHash('create-pw-hash', this.state.newPassword)
-            }
-          }}
-          disabled={this.state.enteringNewPassword && !this.state.newPassword}
-          style={styles.settingsButton}>
-          <AppText style={styles.settingsButtonText}>
-            {labels.passwordSettings.setPassword}
-          </AppText>
-        </TouchableOpacity>
-      </View>
-    )
+          <PasswordField
+            autoFocus={false}
+            placeholder={labels.confirmPassword}
+            value={passwordConfirmation}
+            onChangeText={this.handleConfirmationInput}
+          />
+          {
+            shouldShowErrorMessage &&
+            <AppText style={styles.errorMessage}>
+              {labels.passwordsDontMatch}
+            </AppText>
+          }
+          <SettingsButton
+            onPress={this.savePassword}
+            disabled={isSaveButtonDisabled}
+          >
+            {labels.savePassword}
+          </SettingsButton>
+        </View>
+      )
+    }
+
   }
 }
\ No newline at end of file
diff --git a/components/settings/password/password-field.js b/components/settings/password/password-field.js
index 1757331..a62b435 100644
--- a/components/settings/password/password-field.js
+++ b/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}
diff --git a/i18n/en/settings.js b/i18n/en/settings.js
index e985f7d..7b23f67 100644
--- a/i18n/en/settings.js
+++ b/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',
diff --git a/styles/index.js b/styles/index.js
index 05489a5..aa38fe8 100644
--- a/styles/index.js
+++ b/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
   },