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 (
+
+
+ {children}
+
+
+ )
+}
+
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 (
-
- {this.state.enteringNewPassword &&
+ const {
+ isSettingPassword,
+ password,
+ passwordConfirmation,
+ shouldShowErrorMessage,
+ } = this.state
+ const labels = settings.passwordSettings
+
+ const isSaveButtonDisabled =
+ !password.length ||
+ !passwordConfirmation.length
+
+ if (!isSettingPassword) {
+ return (
+
+
+ {labels.setPassword}
+
+
+ )
+ } else {
+ return (
+
this.setState({newPassword: val})}
+ placeholder={labels.enterNew}
+ value={password}
+ onChangeText={this.handlePasswordInput}
/>
- }
- {
- 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}>
-
- {labels.passwordSettings.setPassword}
-
-
-
- )
+
+ {
+ shouldShowErrorMessage &&
+
+ {labels.passwordsDontMatch}
+
+ }
+
+ {labels.savePassword}
+
+
+ )
+ }
+
}
}
\ 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 (