Introduces password management section redesign

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 />

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
 }

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
-          placeholder={labels.enterNew}
-          value={password}
+      <React.Fragment>
+        <AppTextInput
           onChangeText={this.handlePasswordInput}
+          placeholder={labels.enterNew}
+          textContentType="password"
+          value={password}
         />
-        <PasswordField
-          autoFocus={false}
-          placeholder={labels.confirmPassword}
-          value={passwordConfirmation}
+        <AppTextInput
           onChangeText={this.handleConfirmationInput}
+          placeholder={labels.confirmPassword}
+          textContentType="password"
+          value={passwordConfirmation}
         />
-        {
-          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>
     )
   }
-}
+}
+
+const styles = StyleSheet.create({
+  error: {
+    color: Colors.orange,
+    marginTop: Spacing.base
+  }
+})

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>
     )
   }
 }

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
 }

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 AppTextInput from '../../common/app-text-input'
+import Button from '../../common/button'
+
 import { requestHash, openDb } from '../../../db'
-
-import PasswordField from './password-field'
-import SettingsButton from '../shared/settings-button'
-
+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
-}
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer
+  }
+})