From d3f9652b9d2592848c2d76a4a5aa5617b7fdc39b Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Sun, 9 Dec 2018 12:41:40 +0100
Subject: [PATCH] Creates reusable password confirmation component
---
components/settings/password/create.js | 83 +---------------
.../settings/password/enter-new-password.js | 97 +++++++++++++++++++
components/settings/password/update.js | 39 +-------
3 files changed, 106 insertions(+), 113 deletions(-)
create mode 100644 components/settings/password/enter-new-password.js
diff --git a/components/settings/password/create.js b/components/settings/password/create.js
index e9603bec..011bbd79 100644
--- a/components/settings/password/create.js
+++ b/components/settings/password/create.js
@@ -1,43 +1,15 @@
import React, { Component } from 'react'
import { View } from 'react-native'
-import nodejs from 'nodejs-mobile-react-native'
-import AppText from '../../app-text'
-import styles from '../../../styles'
import { settings } from '../../../i18n/en/settings'
-import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
-import PasswordField from './password-field'
-import showBackUpReminder from './show-backup-reminder'
+import EnterNewPassword from './enter-new-password'
import SettingsButton from './settings-button'
-
-
+import showBackUpReminder from './show-backup-reminder'
export default class CreatePassword extends Component {
constructor() {
super()
this.state = {
- isSettingPassword: false,
- password: '',
- passwordConfirmation: '',
- shouldShowErrorMessage: false,
- }
- nodejs.channel.addListener(
- 'create-pw-hash',
- changeEncryptionAndRestartApp,
- this
- )
- }
-
- componentWillUnmount() {
- nodejs.channel.removeListener('create-pw-hash', changeEncryptionAndRestartApp)
- }
-
- savePassword = () => {
- if (this.comparePasswords()) {
- requestHash('create-pw-hash', this.state.password)
- } else {
- this.setState({
- shouldShowErrorMessage: true
- })
+ isSettingPassword: false
}
}
@@ -50,31 +22,12 @@ export default class CreatePassword extends Component {
showBackUpReminder(this.toggleSettingPassword)
}
- comparePasswords = () => {
- return this.state.password === this.state.passwordConfirmation
- }
-
- handlePasswordInput = (password) => {
- this.setState({ password })
- }
-
- handleConfirmationInput = (passwordConfirmation) => {
- this.setState({ passwordConfirmation })
- }
-
render () {
const {
- isSettingPassword,
- password,
- passwordConfirmation,
- shouldShowErrorMessage,
+ isSettingPassword
} = this.state
const labels = settings.passwordSettings
- const isSaveButtonDisabled =
- !password.length ||
- !passwordConfirmation.length
-
if (!isSettingPassword) {
return (
<View>
@@ -84,33 +37,7 @@ export default class CreatePassword extends Component {
</View>
)
} else {
- return (
- <View>
- <PasswordField
- placeholder={labels.enterNew}
- value={password}
- onChangeText={this.handlePasswordInput}
- />
- <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>
- )
+ return <EnterNewPassword />
}
}
diff --git a/components/settings/password/enter-new-password.js b/components/settings/password/enter-new-password.js
new file mode 100644
index 00000000..a63556b7
--- /dev/null
+++ b/components/settings/password/enter-new-password.js
@@ -0,0 +1,97 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import nodejs from 'nodejs-mobile-react-native'
+
+import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import AppText from '../../app-text'
+import PasswordField from './password-field'
+import SettingsButton from './settings-button'
+
+import styles from '../../../styles'
+import { settings } from '../../../i18n/en/settings'
+
+const LISTENER_TYPE = 'create-or-change-pw'
+
+export default class EnterNewPassword extends Component {
+
+ constructor() {
+ super()
+ this.state = {
+ password: '',
+ passwordConfirmation: '',
+ shouldShowErrorMessage: false,
+ }
+ nodejs.channel.addListener(
+ LISTENER_TYPE,
+ changeEncryptionAndRestartApp,
+ this
+ )
+ }
+
+ componentWillUnmount() {
+ nodejs.channel.removeListener(LISTENER_TYPE, changeEncryptionAndRestartApp)
+ }
+
+ savePassword = () => {
+ if (this.comparePasswords()) {
+ requestHash(LISTENER_TYPE, this.state.password)
+ } else {
+ this.setState({
+ shouldShowErrorMessage: true
+ })
+ }
+ }
+
+ comparePasswords = () => {
+ return this.state.password === this.state.passwordConfirmation
+ }
+
+ handlePasswordInput = (password) => {
+ this.setState({ password })
+ }
+
+ handleConfirmationInput = (passwordConfirmation) => {
+ this.setState({ passwordConfirmation })
+ }
+
+ render () {
+ const {
+ password,
+ passwordConfirmation,
+ shouldShowErrorMessage,
+ } = this.state
+ const labels = settings.passwordSettings
+
+ const isSaveButtonDisabled =
+ !password.length ||
+ !passwordConfirmation.length
+
+ return (
+ <View>
+ <PasswordField
+ placeholder={labels.enterNew}
+ value={password}
+ onChangeText={this.handlePasswordInput}
+ />
+ <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/update.js b/components/settings/password/update.js
index 141957b4..33cddbd3 100644
--- a/components/settings/password/update.js
+++ b/components/settings/password/update.js
@@ -3,7 +3,8 @@ import { View } from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
import { shared as sharedLabels } from '../../../i18n/en/labels'
import { settings } from '../../../i18n/en/settings'
-import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import { requestHash } from '../../../db'
+import EnterNewPassword from './enter-new-password'
import PasswordField from './password-field'
import SettingsButton from './settings-button'
import showBackUpReminder from './show-backup-reminder'
@@ -15,8 +16,6 @@ export default class ChangePassword extends Component {
super()
this.state = {
currentPassword: null,
- newPassword: null,
- newPasswordConfirmation: null,
enteringCurrentPassword: false,
enteringNewPassword: false
}
@@ -26,17 +25,10 @@ export default class ChangePassword extends Component {
this.openNewPasswordField,
this
)
-
- nodejs.channel.addListener(
- 'change-pw',
- changeEncryptionAndRestartApp,
- this
- )
}
componentWillUnmount() {
nodejs.channel.removeListener('pre-change-pw-check', this.openNewPasswordField)
- nodejs.channel.removeListener('change-pw', changeEncryptionAndRestartApp)
}
openNewPasswordField = async hash => {
@@ -72,21 +64,12 @@ export default class ChangePassword extends Component {
requestHash('pre-change-pw-check', this.state.currentPassword)
}
- handleNewPasswordInput = (newPassword) => {
- this.setState({ newPassword })
- }
-
- changePassword = () => {
- requestHash('change-pw', this.state.newPassword)
- }
-
render() {
const {
enteringCurrentPassword,
enteringNewPassword,
- currentPassword,
- newPassword
+ currentPassword
} = this.state
const labels = settings.passwordSettings
@@ -110,21 +93,7 @@ export default class ChangePassword extends Component {
}
if (enteringNewPassword) {
- return (
- <View>
- <PasswordField
- placeholder={labels.enterNew}
- value={newPassword}
- onChangeText={this.handleNewPasswordInput}
- />
- <SettingsButton
- onPress={this.changePassword}
- disabled={!newPassword}
- >
- {labels.changePassword}
- </SettingsButton>
- </View>
- )
+ return <EnterNewPassword />
}
return (
--
GitLab