From e16fc392984babd1255d8b8f7e59390230236f25 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Wed, 5 Dec 2018 22:20:28 +0100 Subject: [PATCH 1/5] Extracting SettingsButton component --- components/settings/password/create.js | 22 +++--------------- .../settings/password/settings-button.js | 23 +++++++++++++++++++ 2 files changed, 26 insertions(+), 19 deletions(-) create mode 100644 components/settings/password/settings-button.js diff --git a/components/settings/password/create.js b/components/settings/password/create.js index 68b7b2d..e2e8517 100644 --- a/components/settings/password/create.js +++ b/components/settings/password/create.js @@ -1,8 +1,5 @@ import React, { Component } from 'react' -import { - View, - TouchableOpacity, -} from 'react-native' +import { View } from 'react-native' import nodejs from 'nodejs-mobile-react-native' import AppText from '../../app-text' import styles from '../../../styles' @@ -10,22 +7,9 @@ import { settings } from '../../../i18n/en/settings' import { requestHash, changeEncryptionAndRestartApp } from '../../../db' import PasswordField from './password-field' import showBackUpReminder from './show-backup-reminder' +import SettingsButton from './settings-button' + -const SettingsButton = ({ children, ...props }) => { - return ( - - - {children} - - - ) -} export default class CreatePassword extends Component { constructor() { diff --git a/components/settings/password/settings-button.js b/components/settings/password/settings-button.js new file mode 100644 index 0000000..3b29241 --- /dev/null +++ b/components/settings/password/settings-button.js @@ -0,0 +1,23 @@ +import React from 'react' + +import { TouchableOpacity } from 'react-native' +import AppText from '../../app-text' +import styles from '../../../styles' + +const SettingsButton = ({ children, ...props }) => { + return ( + + + {children} + + + ) +} + +export default SettingsButton \ No newline at end of file From acc7ce13f864d1b9cdc30581b2a1f53f4064c9f6 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Wed, 5 Dec 2018 22:38:02 +0100 Subject: [PATCH 2/5] Adds prop types to the project & and uses them in SettingsButton component --- components/settings/password/settings-button.js | 6 ++++++ package.json | 1 + 2 files changed, 7 insertions(+) diff --git a/components/settings/password/settings-button.js b/components/settings/password/settings-button.js index 3b29241..97272bb 100644 --- a/components/settings/password/settings-button.js +++ b/components/settings/password/settings-button.js @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import { TouchableOpacity } from 'react-native' import AppText from '../../app-text' @@ -20,4 +21,9 @@ const SettingsButton = ({ children, ...props }) => { ) } +SettingsButton.propTypes = { + onPress: PropTypes.func.isRequired, + disabled: PropTypes.bool +} + export default SettingsButton \ No newline at end of file diff --git a/package.json b/package.json index e01b525..3cb33ad 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "nodejs-mobile-react-native": "^0.3.0", "object-path": "^0.11.4", "obv": "0.0.1", + "prop-types": "^15.6.2", "react": "16.4.1", "react-native": "~0.56.0", "react-native-calendars": "^1.19.3", From 7ddf9a7002078185bea1f70c3438d7104abea1b6 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Wed, 5 Dec 2018 22:41:41 +0100 Subject: [PATCH 3/5] Reuses SettingsButton component --- components/settings/password/update.js | 45 +++++++++++++------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/components/settings/password/update.js b/components/settings/password/update.js index fc10cca..a470e57 100644 --- a/components/settings/password/update.js +++ b/components/settings/password/update.js @@ -10,9 +10,11 @@ import { shared } from '../../../i18n/en/labels' import { settings as labels } from '../../../i18n/en/settings' import { requestHash, changeEncryptionAndRestartApp } from '../../../db' import PasswordField from './password-field' +import SettingsButton from './settings-button' import showBackUpReminder from './show-backup-reminder' import checkCurrentPassword from './check-current-password' + export default class ChangePassword extends Component { constructor() { super() @@ -60,21 +62,23 @@ export default class ChangePassword extends Component { } } + startChangingPassword = () => { + showBackUpReminder(() => { + this.setState({ enteringCurrentPassword: true }) + }) + } + render() { return ( {!this.state.enteringCurrentPassword && !this.state.enteringNewPassword && - showBackUpReminder(() => { - this.setState({ enteringCurrentPassword: true }) - })} - disabled={this.state.currentPassword} - style={styles.settingsButton}> - - {labels.passwordSettings.changePassword} - - + + {labels.passwordSettings.changePassword} + } {this.state.enteringCurrentPassword && @@ -89,14 +93,12 @@ export default class ChangePassword extends Component { value={this.state.currentPassword} placeholder={labels.passwordSettings.enterCurrent} /> - requestHash('pre-change-pw-check', this.state.currentPassword)} disabled={!this.state.currentPassword} - style={styles.settingsButton}> - - {shared.unlock} - - + > + {shared.unlock} + } @@ -112,15 +114,12 @@ export default class ChangePassword extends Component { value={this.state.changedPassword} placeholder={labels.passwordSettings.enterNew} /> - - requestHash('change-pw', this.state.newPassword)} disabled={ !this.state.newPassword } - style={styles.settingsButton}> - - {labels.passwordSettings.changePassword} - - + > + {labels.passwordSettings.changePassword} + } From 857b8fc1f16c462ebbd86b44e6baf5a9b69dce6f Mon Sep 17 00:00:00 2001 From: mashazyu Date: Fri, 7 Dec 2018 23:56:33 +0100 Subject: [PATCH 4/5] Cleanup ChangePassword component --- components/settings/password/create.js | 6 +- components/settings/password/update.js | 126 ++++++++++++++----------- 2 files changed, 70 insertions(+), 62 deletions(-) diff --git a/components/settings/password/create.js b/components/settings/password/create.js index e2e8517..e9603be 100644 --- a/components/settings/password/create.js +++ b/components/settings/password/create.js @@ -59,11 +59,7 @@ export default class CreatePassword extends Component { } handleConfirmationInput = (passwordConfirmation) => { - const { password } = this.state - this.setState({ - passwordConfirmation, - isPasswordsMatch: passwordConfirmation === password - }) + this.setState({ passwordConfirmation }) } render () { diff --git a/components/settings/password/update.js b/components/settings/password/update.js index a470e57..141957b 100644 --- a/components/settings/password/update.js +++ b/components/settings/password/update.js @@ -1,13 +1,8 @@ - import React, { Component } from 'react' -import { - View, - TouchableOpacity} from 'react-native' +import { View } from 'react-native' import nodejs from 'nodejs-mobile-react-native' -import AppText from '../../app-text' -import styles from '../../../styles' -import { shared } from '../../../i18n/en/labels' -import { settings as labels } from '../../../i18n/en/settings' +import { shared as sharedLabels } from '../../../i18n/en/labels' +import { settings } from '../../../i18n/en/settings' import { requestHash, changeEncryptionAndRestartApp } from '../../../db' import PasswordField from './password-field' import SettingsButton from './settings-button' @@ -19,10 +14,11 @@ export default class ChangePassword extends Component { constructor() { super() this.state = { - enteringCurrentPassword: false, currentPassword: null, - enteringNewPassword: false, - newPassword: null + newPassword: null, + newPasswordConfirmation: null, + enteringCurrentPassword: false, + enteringNewPassword: false } nodejs.channel.addListener( @@ -55,9 +51,9 @@ export default class ChangePassword extends Component { if (passwordCorrect) { this.setState({ - enteringCurrentPassword: false, currentPassword: null, - enteringNewPassword: true + enteringNewPassword: true, + enteringCurrentPassword: false }) } } @@ -68,61 +64,77 @@ export default class ChangePassword extends Component { }) } + handleCurrentPasswordInput = (currentPassword) => { + this.setState({ currentPassword }) + } + + checkCurrentPassword = () => { + requestHash('pre-change-pw-check', this.state.currentPassword) + } + + handleNewPasswordInput = (newPassword) => { + this.setState({ newPassword }) + } + + changePassword = () => { + requestHash('change-pw', this.state.newPassword) + } + render() { - return ( - - {!this.state.enteringCurrentPassword && - !this.state.enteringNewPassword && - - {labels.passwordSettings.changePassword} - - } - {this.state.enteringCurrentPassword && - - { - this.setState({ - currentPassword: val, - wrongPassword: false - }) - }} - value={this.state.currentPassword} - placeholder={labels.passwordSettings.enterCurrent} - /> - requestHash('pre-change-pw-check', this.state.currentPassword)} - disabled={!this.state.currentPassword} - > - {shared.unlock} - - - } + const { + enteringCurrentPassword, + enteringNewPassword, + currentPassword, + newPassword + } = this.state - {this.state.enteringNewPassword && + const labels = settings.passwordSettings + + if (enteringCurrentPassword) { + return ( { - this.setState({ - newPassword: val - }) - }} - value={this.state.changedPassword} - placeholder={labels.passwordSettings.enterNew} + placeholder={labels.enterCurrent} + value={currentPassword} + onChangeText={this.handleCurrentPasswordInput} /> requestHash('change-pw', this.state.newPassword)} - disabled={ !this.state.newPassword } + onPress={this.checkCurrentPassword} + disabled={!currentPassword} > - {labels.passwordSettings.changePassword} + {sharedLabels.unlock} - } + ) + } + if (enteringNewPassword) { + return ( + + + + {labels.changePassword} + + + ) + } + + return ( + + + {labels.changePassword} + ) } From d3f9652b9d2592848c2d76a4a5aa5617b7fdc39b Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 9 Dec 2018 12:41:40 +0100 Subject: [PATCH 5/5] 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 e9603be..011bbd7 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 ( @@ -84,33 +37,7 @@ export default class CreatePassword extends Component { ) } else { - return ( - - - - { - shouldShowErrorMessage && - - {labels.passwordsDontMatch} - - } - - {labels.savePassword} - - - ) + return } } diff --git a/components/settings/password/enter-new-password.js b/components/settings/password/enter-new-password.js new file mode 100644 index 0000000..a63556b --- /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 ( + + + + { + shouldShowErrorMessage && + + {labels.passwordsDontMatch} + + } + + {labels.savePassword} + + + ) + } +} \ No newline at end of file diff --git a/components/settings/password/update.js b/components/settings/password/update.js index 141957b..33cddbd 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 ( - - - - {labels.changePassword} - - - ) + return } return (