From a68ec248b0997a1a78bd53014c0f31e07a0257e8 Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Wed, 25 Mar 2020 16:26:57 +0100
Subject: [PATCH] Introduces password management section redesign
---
components/settings/password/create.js | 25 ++++----
components/settings/password/delete.js | 27 ++++----
.../settings/password/enter-new-password.js | 60 +++++++++---------
components/settings/password/index.js | 28 +++++----
components/settings/password/update.js | 26 ++++----
.../settings/shared/confirm-with-password.js | 61 ++++++++-----------
6 files changed, 105 insertions(+), 122 deletions(-)
diff --git a/components/settings/password/create.js b/components/settings/password/create.js
index 9178312c..8838b30e 100644
--- a/components/settings/password/create.js
+++ b/components/settings/password/create.js
@@ -1,16 +1,17 @@
import React, { Component } from 'react'
-import { View } from 'react-native'
-import settings from '../../../i18n/en/settings'
+
+import Button from '../../common/button'
+
import EnterNewPassword from './enter-new-password'
-import SettingsButton from '../shared/settings-button'
import showBackUpReminder from './show-backup-reminder'
+import settings from '../../../i18n/en/settings'
+
export default class CreatePassword extends Component {
constructor() {
super()
- this.state = {
- isSettingPassword: false
- }
+
+ this.state = { isSettingPassword: false }
}
toggleSettingPassword = () => {
@@ -23,18 +24,14 @@ export default class CreatePassword extends Component {
}
render () {
- const {
- isSettingPassword
- } = this.state
+ const { isSettingPassword } = this.state
const labels = settings.passwordSettings
if (!isSettingPassword) {
return (
- <View>
- <SettingsButton onPress={this.startSettingPassword}>
- {labels.setPassword}
- </SettingsButton>
- </View>
+ <Button isCTA onPress={this.startSettingPassword}>
+ {labels.setPassword}
+ </Button>
)
} else {
return <EnterNewPassword />
diff --git a/components/settings/password/delete.js b/components/settings/password/delete.js
index d034a73d..e08d133a 100644
--- a/components/settings/password/delete.js
+++ b/components/settings/password/delete.js
@@ -1,17 +1,22 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import labels from '../../../i18n/en/settings'
-import { changeEncryptionAndRestartApp } from '../../../db'
+import Button from '../../common/button'
import ConfirmWithPassword from '../shared/confirm-with-password'
-import SettingsButton from '../shared/settings-button'
+
+import { changeEncryptionAndRestartApp } from '../../../db'
+import labels from '../../../i18n/en/settings'
export default class DeletePassword extends Component {
+ static propTypes = {
+ onStartDelete: PropTypes.func,
+ onCancelDelete: PropTypes.func
+ }
+
constructor() {
super()
- this.state = {
- enteringCurrentPassword: false
- }
+
+ this.state = { enteringCurrentPassword: false }
}
startConfirmWithPassword = () => {
@@ -29,7 +34,6 @@ export default class DeletePassword extends Component {
}
render() {
-
const { enteringCurrentPassword } = this.state
if (enteringCurrentPassword) {
@@ -42,14 +46,9 @@ export default class DeletePassword extends Component {
}
return (
- <SettingsButton onPress={this.startConfirmWithPassword} >
+ <Button isCTA onPress={this.startConfirmWithPassword}>
{labels.passwordSettings.deletePassword}
- </SettingsButton>
+ </Button>
)
}
-}
-
-DeletePassword.propTypes = {
- onStartDelete: PropTypes.func,
- onCancelDelete: PropTypes.func
}
\ No newline at end of file
diff --git a/components/settings/password/enter-new-password.js b/components/settings/password/enter-new-password.js
index cf884bb0..c4570338 100644
--- a/components/settings/password/enter-new-password.js
+++ b/components/settings/password/enter-new-password.js
@@ -1,13 +1,13 @@
import React, { Component } from 'react'
-import { View } from 'react-native'
+import { StyleSheet } from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
-import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
import AppText from '../../common/app-text'
-import PasswordField from '../shared/password-field'
-import SettingsButton from '../shared/settings-button'
+import AppTextInput from '../../common/app-text-input'
+import Button from '../../common/button'
-import styles from '../../../styles'
+import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
+import { Colors, Spacing } from '../../../styles/redesign'
import settings from '../../../i18n/en/settings'
const LISTENER_TYPE = 'create-or-change-pw'
@@ -36,9 +36,7 @@ export default class EnterNewPassword extends Component {
if (this.comparePasswords()) {
requestHash(LISTENER_TYPE, this.state.password)
} else {
- this.setState({
- shouldShowErrorMessage: true
- })
+ this.setState({ shouldShowErrorMessage: true })
}
}
@@ -58,40 +56,40 @@ export default class EnterNewPassword extends Component {
const {
password,
passwordConfirmation,
- shouldShowErrorMessage,
+ shouldShowErrorMessage
} = this.state
const labels = settings.passwordSettings
-
- const isSaveButtonDisabled =
- !password.length ||
- !passwordConfirmation.length
+ const isButtonActive =
+ Boolean(password.length && passwordConfirmation.length)
return (
- <View>
- <PasswordField
+ <React.Fragment>
+ <AppTextInput
+ onChangeText={this.handlePasswordInput}
placeholder={labels.enterNew}
+ textContentType="password"
value={password}
- onChangeText={this.handlePasswordInput}
/>
- <PasswordField
- autoFocus={false}
+ <AppTextInput
+ onChangeText={this.handleConfirmationInput}
placeholder={labels.confirmPassword}
+ textContentType="password"
value={passwordConfirmation}
- onChangeText={this.handleConfirmationInput}
/>
- {
- shouldShowErrorMessage &&
- <AppText style={styles.errorMessage}>
- {labels.passwordsDontMatch}
- </AppText>
+ {shouldShowErrorMessage &&
+ <AppText style={styles.error}>{labels.passwordsDontMatch}</AppText>
}
- <SettingsButton
- onPress={this.savePassword}
- disabled={isSaveButtonDisabled}
- >
+ <Button isCTA={isButtonActive} isSmall onPress={this.savePassword}>
{labels.savePassword}
- </SettingsButton>
- </View>
+ </Button>
+ </React.Fragment>
)
}
-}
\ No newline at end of file
+}
+
+const styles = StyleSheet.create({
+ error: {
+ color: Colors.orange,
+ marginTop: Spacing.base
+ }
+})
\ No newline at end of file
diff --git a/components/settings/password/index.js b/components/settings/password/index.js
index 933cada8..5e67e5d5 100644
--- a/components/settings/password/index.js
+++ b/components/settings/password/index.js
@@ -1,18 +1,20 @@
import React, { Component } from 'react'
-import { ScrollView } from 'react-native'
+
+import AppPage from '../../common/app-page'
+import AppText from '../../common/app-text'
+import Segment from '../../common/segment'
+
import CreatePassword from './create'
import ChangePassword from './update'
import DeletePassword from './delete'
-import Segment from '../../common/segment'
-import AppText from '../../common/app-text'
-import {
- hasEncryptionObservable
-} from '../../../local-storage'
+
+import { hasEncryptionObservable } from '../../../local-storage'
import labels from '../../../i18n/en/settings'
export default class PasswordSetting extends Component {
constructor(props) {
super(props)
+
this.state = {
isPasswordSet: hasEncryptionObservable.value,
isChangingPassword: false,
@@ -51,29 +53,29 @@ export default class PasswordSetting extends Component {
} = labels.passwordSettings
return (
- <ScrollView>
- <Segment title={title}>
+ <AppPage>
+ <Segment title={title} last>
<AppText>
- { isPasswordSet ? explainerEnabled : explainerDisabled }
+ {isPasswordSet ? explainerEnabled : explainerDisabled}
</AppText>
- { !isPasswordSet && <CreatePassword/> }
+ {!isPasswordSet && <CreatePassword/>}
- { (isPasswordSet && !isDeletingPassword) && (
+ {(isPasswordSet && !isDeletingPassword) && (
<ChangePassword
onStartChange = {this.onChangingPassword}
onCancelChange = {this.onCancelChangingPassword}
/>
)}
- { (isPasswordSet && !isChangingPassword) && (
+ {(isPasswordSet && !isChangingPassword) && (
<DeletePassword
onStartDelete = {this.onDeletingPassword}
onCancelDelete = {this.onCancelDeletingPassword}
/>
)}
</Segment>
- </ScrollView>
+ </AppPage>
)
}
}
diff --git a/components/settings/password/update.js b/components/settings/password/update.js
index 447b9de0..001441b2 100644
--- a/components/settings/password/update.js
+++ b/components/settings/password/update.js
@@ -1,16 +1,23 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import settings from '../../../i18n/en/settings'
+import Button from '../../common/button'
+
import EnterNewPassword from './enter-new-password'
-import SettingsButton from '../shared/settings-button'
import showBackUpReminder from './show-backup-reminder'
import ConfirmWithPassword from '../shared/confirm-with-password'
+import settings from '../../../i18n/en/settings'
export default class ChangePassword extends Component {
+ static propTypes = {
+ onStartChange: PropTypes.func,
+ onCancelChange: PropTypes.func
+ }
+
constructor() {
super()
+
this.state = {
currentPassword: null,
enteringCurrentPassword: false,
@@ -48,14 +55,13 @@ export default class ChangePassword extends Component {
}
render() {
-
const {
enteringCurrentPassword,
enteringNewPassword,
currentPassword
} = this.state
-
const labels = settings.passwordSettings
+ const isDisabled = currentPassword !== null
if (enteringCurrentPassword) {
return (
@@ -71,17 +77,9 @@ export default class ChangePassword extends Component {
}
return (
- <SettingsButton
- onPress={this.startChangingPassword}
- disabled={currentPassword}
- >
+ <Button disabled={isDisabled} isCTA onPress={this.startChangingPassword}>
{labels.changePassword}
- </SettingsButton>
+ </Button>
)
}
-}
-
-ChangePassword.propTypes = {
- onStartChange: PropTypes.func,
- onCancelChange: PropTypes.func
}
\ No newline at end of file
diff --git a/components/settings/shared/confirm-with-password.js b/components/settings/shared/confirm-with-password.js
index 02d56002..a3c845a2 100644
--- a/components/settings/shared/confirm-with-password.js
+++ b/components/settings/shared/confirm-with-password.js
@@ -1,27 +1,22 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import { View, Alert } from 'react-native'
-
+import { Alert, StyleSheet, View } from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
-import { requestHash, openDb } from '../../../db'
-import PasswordField from './password-field'
-import SettingsButton from '../shared/settings-button'
+import AppTextInput from '../../common/app-text-input'
+import Button from '../../common/button'
+import { requestHash, openDb } from '../../../db'
+import { Containers } from '../../../styles/redesign'
import settings from '../../../i18n/en/settings'
import { shared } from '../../../i18n/en/labels'
export default class ConfirmWithPassword extends Component {
constructor() {
super()
- this.state = {
- password: null
- }
- nodejs.channel.addListener(
- 'password-check',
- this.checkPassword,
- this
- )
+
+ this.state = { password: null }
+ nodejs.channel.addListener('password-check', this.checkPassword, this)
}
componentWillUnmount() {
@@ -67,36 +62,24 @@ export default class ConfirmWithPassword extends Component {
render() {
const { password } = this.state
const labels = settings.passwordSettings
+ const isCTA = password !== null
return (
- <View>
- <PasswordField
+ <React.Fragment>
+ <AppTextInput
+ onChangeText={this.handlePasswordInput}
placeholder={labels.enterCurrent}
value={password}
- onChangeText={this.handlePasswordInput}
/>
- <View style={{
- flex: 1,
- flexDirection: 'row',
- justifyContent: 'space-between'
- }}>
- <SettingsButton
- onPress={this.props.onCancel}
- secondary
- >
+ <View style={styles.container}>
+ <Button isSmall onPress={this.props.onCancel}>
{shared.cancel}
- </SettingsButton>
- <SettingsButton
- onPress={this.initPasswordCheck}
- disabled={!password}
- style={{
- flex: 1,
- }}
- >
+ </Button>
+ <Button isCTA={isCTA} isSmall onPress={this.initPasswordCheck}>
{shared.confirmToProceed}
- </SettingsButton>
+ </Button>
</View>
- </View>
+ </React.Fragment>
)
}
@@ -105,4 +88,10 @@ export default class ConfirmWithPassword extends Component {
ConfirmWithPassword.propTypes = {
onSuccess: PropTypes.func,
onCancel: PropTypes.func
-}
\ No newline at end of file
+}
+
+const styles = StyleSheet.create({
+ container: {
+ ...Containers.rowContainer
+ }
+})
\ No newline at end of file
--
GitLab